Is it possible to display this code through printing rather than using an onclick event?

Question

Is it possible to display this code through printing rather than using an onclick event?

I have a puzzle website in the works where users select a puzzle to solve. I am looking for a way to display the puzzles directly on the website instead of using pop-up boxes. I am proficient in various coding languages, so any solution will work for me.

Here is the code snippet I have currently:

<body>

<script type="text/javascript">

function myFunction()
{

        function ask() {
    var a = (Math.round(Math.random()*1000000))
    alert (a)
    return prompt("What was the number?") == eval( a );
}

var questions = [ask(), ask(), ask(), ask(), ask()],
    total = questions.length,
    correct = questions.filter(Boolean).length;

alert( "You got "+correct+"/"+total+" correct");

}

</script>

<button onClick="myFunction()">Remember the number</button>


</body>

<body>

<script type="text/javascript">
function myFunction2(){

        function ask() {
    var a = Math.floor(Math.random() * 10) + 1;
    var b = Math.floor(Math.random() * 10) + 1;
    var op = ["*", "+", "/", "-"][Math.floor(Math.random()*4)];
    return prompt("How much is " + a + " " + op + " " + b + "?") == eval( a + op + b);
}

var questions = [ask(), ask(), ask(), ask(), ask()],
    total = questions.length,
    correct = questions.filter(Boolean).length;

alert( "You got "+correct+"/"+total+" correct");
}
</script>

<button onClick="myFunction2()">Quick math</button>

</body>

</html>
</html>

I am seeking help to find a way to display this code as text within a text box on the page, allowing users to input their answers directly on the website. Any suggestions on how to enhance the design and functionality are welcome. Thank you!

Your assistance is greatly appreciated. Thanks.

javascript jquery html css

Answer 1

Answer №1

I followed your instructions for the "Remember the number" button click. Unfortunately, I didn't have enough time to work on the other task.

Here is the HTML code:

<body>

<button id="rmbrBtn">Remember the number</button>

</body>

<body>

<button id="quivkBtn">Quick math</button>
    <div id="question_area">

    </div>
</body>

</html>
</html>

And here is the JS & jQuery code:

$("#rmbrBtn").click(function()
{
    var questions = [];

    function checkAnswer (){
            total = questions.length,
            correct = questions.filter(Boolean).length;
        if(total < 5)
        {
            ask();
        }else{
            var answer = '<div>You got '+correct+'/'+total+' correct <input type="button" value="Ok" id="ansOk"/></div>';
            $("#question_area").append(answer);
            $("#ansOk").click(function(){
                $(this).parent().empty();
                $(this).parent().remove();
            });
        }
    }

    function ask() {
        var a = (Math.round(Math.random()*1000000));
        var viewNumber = '<div>'+a+'<input type="button" id="ok" value="OK"/>'+'</div>';

        var promptVal = '<div>Enter your value: <input type="text" id="ans" /> <input   type="button" id="prmtOk" value="Ok"/></div>';

        $("#question_area").append(viewNumber);

        $("#ok").click(function(){
            $(this).parent().empty();
            $(this).parent().remove();

            $("#question_area").append(promptVal);  

            $("#prmtOk").click(function(){
               var prmt = $("#ans").val();
               var addVal = prmt == a;
                questions.push(addVal);
                checkAnswer();
                $(this).parent().empty();
                $(this).parent().remove();
            });
        });
    }

    // Run the function.
    checkAnswer();
});

You can find an online solution at: JSFiddle

I apologize for not being able to provide comments or work on the additional task at this time.

I trust that you will be able to understand and complete the task without further assistance.

Answer 2

I followed your instructions for the "Remember the number" button click. Unfortunately, I didn't have enough time to work on the other task.

Here is the HTML code:

<body>

<button id="rmbrBtn">Remember the number</button>

</body>

<body>

<button id="quivkBtn">Quick math</button>
    <div id="question_area">

    </div>
</body>

</html>
</html>

And here is the JS & jQuery code:

$("#rmbrBtn").click(function()
{
    var questions = [];

    function checkAnswer (){
            total = questions.length,
            correct = questions.filter(Boolean).length;
        if(total < 5)
        {
            ask();
        }else{
            var answer = '<div>You got '+correct+'/'+total+' correct <input type="button" value="Ok" id="ansOk"/></div>';
            $("#question_area").append(answer);
            $("#ansOk").click(function(){
                $(this).parent().empty();
                $(this).parent().remove();
            });
        }
    }

    function ask() {
        var a = (Math.round(Math.random()*1000000));
        var viewNumber = '<div>'+a+'<input type="button" id="ok" value="OK"/>'+'</div>';

        var promptVal = '<div>Enter your value: <input type="text" id="ans" /> <input   type="button" id="prmtOk" value="Ok"/></div>';

        $("#question_area").append(viewNumber);

        $("#ok").click(function(){
            $(this).parent().empty();
            $(this).parent().remove();

            $("#question_area").append(promptVal);  

            $("#prmtOk").click(function(){
               var prmt = $("#ans").val();
               var addVal = prmt == a;
                questions.push(addVal);
                checkAnswer();
                $(this).parent().empty();
                $(this).parent().remove();
            });
        });
    }

    // Run the function.
    checkAnswer();
});

You can find an online solution at: JSFiddle

I apologize for not being able to provide comments or work on the additional task at this time.

I trust that you will be able to understand and complete the task without further assistance.

Answer 3

Answer №2

To easily update the content of your webpage, simply insert a div element at the beginning of your code and utilize jQuery's .html() function.

For example:

$('.header').html('You are absolutely right!');

Check out this demonstration on http://jsfiddle.net/AMISingh/8nWKD/3/

Answer 4

To easily update the content of your webpage, simply insert a div element at the beginning of your code and utilize jQuery's .html() function.

For example:

$('.header').html('You are absolutely right!');

Check out this demonstration on http://jsfiddle.net/AMISingh/8nWKD/3/

Answer 5

Answer №3

Using only JavaScript, you can achieve the same functionality without relying on JQuery.
http://jsfiddle.net/8nWKD/4/

<div id="header" class="header">This is the header</div>
<div class="button" onClick="test_click()"> Click me!</div>

Here's the corresponding JavaScript code:

function test_click()
{
  document.getElementById("header").innerHTML = "CORRECT!";   
}

Answer 6

Using only JavaScript, you can achieve the same functionality without relying on JQuery.
http://jsfiddle.net/8nWKD/4/

<div id="header" class="header">This is the header</div>
<div class="button" onClick="test_click()"> Click me!</div>

Here's the corresponding JavaScript code:

function test_click()
{
  document.getElementById("header").innerHTML = "CORRECT!";   
}

Is it possible to display this code through printing rather than using an onclick event?

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting issue: JSON.stringify function returning 'undefined'

I'm currently working with ReactJS and attempting to retrieve JSON data from a REST API in JIRA, but I'm facing challenges in achieving this

Table-styled div containing a horizontal scrolling div

Unable to retrieve an image from various sources

What order should jquery files be included in?

Prevent Click Event in JQuery

Storing Multi-Dimensional Arrays in Phonegap 1.0 for iOS 4.3+: A Comprehensive Guide

Store the response data in a global variable or forward it to another function in Node.js using Express JS

Displaying negative values highlighted in red on Datatables platform

PHP loaded HTML does not allow JavaScript to execute

Is it possible to combine the index page with the login page for a web project, or is it recommended to create a separate login page?

Using jQuery to reference a specific div and the ID within that div

What is the best way to create a footer in this scenario and is there a method to perfectly center an

Injecting AngularJS directives and styling elements into the body section of a Twig template using the {% block body %} tag

What is the best way to ensure the menu background aligns perfectly with the header in HTML/CSS?

Encountering a fragment error while utilizing create-react-library

Javascript: Dynamically Altering Images and Text

Create a compressed package of a Vue project that can easily be inserted into a Blogger blog post as a single HTML file

Having trouble with jQuery show/hide not functioning properly?

Unforeseen box model quirks found in modern browsers when styling <table> elements