JsExer.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- ad sense tag-->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1733919132650092"
        crossorigin="anonymous"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FBJL1SB5QM"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-FBJL1SB5QM');
    </script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description"
        content="CodingNation provides exercises to pratice and learn coding. Coding Nation Execise are used to enhance your coding skills">
    <meta name="keywords"
        content="coding, programming, tutorial, learn, HTML, CSS, JavaScript, Python, resources, free, code tutorial, coding exercises, coding challenges, learn to code, coding skills">
    <meta name="author" content="coding-nation">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png">
    <title>JavaScript Exercise</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />
    <link rel="stylesheet" href="../Styles/Exercise.css">
</head>

<body>
    <!--navigation bar-->
    <header class="fixed-navbar">
        <!--navigation bar-->
        <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
            <div class="container-fluid">
                <a class="navbar-brand" href="../index.html">CodingNation</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto" id="navbarNavLinks">
                        <li class="nav-item">
                            <a class="nav-link" href="../index.html">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                aria-controls="navbarNav" aria-expanded="false"
                                aria-label="Toggle navigation">Courses</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="../Python.html">Python</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../React.html">React JS</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../html.html">HTML</a>
                                </li>
                                <li><a class="dropdown-item" href="../css.html">CSS</a></li>
                                <li>
                                    <a class="dropdown-item" href="../jascri.html">JavaScript</a>
                                </li>
                                <li><a class="dropdown-item" href="../cpro.html">C</a></li>
                                <li>
                                    <a class="dropdown-item" href="../java.html">Java</a>
                                </li>
                                <li><a class="dropdown-item" href="../php.html">PHP</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button"
                                data-bs-toggle="dropdown">Practice</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="../HTMLQuiz.html" target="_blank">HTML Quiz</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../CSSQuiz.html" target="_blank">CSS Quiz</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../JSQuiz.html" target="_blank">JavaScript Quiz</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../CQuiz.html" target="_blank">C Quiz</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../JAVAQuiz.html" target="_blank">Java Quiz</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button"
                                data-bs-toggle="dropdown">Exercises</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="../HTMLExer.html" target="_blank">HTML Exercise</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../CSSExer.html" target="_blank">CSS Exercise</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../JsExer.html" target="_blank">JavaScript
                                        Exercise</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../CExer.html" target="_blank">C Exercise</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="../JAVAExer.html" target="_blank">Java Exercise</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../codebot.html" target="_blank">CodeBot</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../Editor.html" target="_blank">Editor</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../About.html">About</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <h1 class="float-start">Exercise</h1>
        <p id="title"></p>
        <div class="questions" id="questions"></div>
        <div class="bt">
            <button type="submit" id="submit">Submit</button>
            <button id="next">Next</button>
            <button id="wrong">Try Again</button>
            <button id="showAnswer">Show Answer</button>
        </div>
    </div>
    <!-- Footer Section -->
    <footer class="container-fluid text-center">
        <hr />
        <span class="bi bi-caret-up" onclick="topFunction()"></span>
        <p>Copyright &copy; 2023 CodingNation. All rights reserved. <br /></p>
        <p>
            Trademark &trade; CodingNation
            <a href="https://www.coding-nation.com/">www.coding-nation.com</a>
        </p>
    </footer>
    <script>
        const submit = document.getElementById("submit");
        const next = document.getElementById("next");
        const wrong = document.getElementById("wrong");
        const questions = document.getElementById("questions");
        const head = document.getElementById("title");
        const showAnswer = document.getElementById("showAnswer");

        const quiz = [
            {
                title: `Create a variable called carName, assign the value Volvo to it.`,
                question: `<p>var <input style="width:80px;" type="text"  maxlength="42"> = "Volvo";</p> `,
                answer: `carName`,
            },

            {
                title: `Multiply 10 with 5, and print the result:`,
                question: `<p>let x = 10;<br> let y = 20;<br>
                    console.log(x <input type="text"  maxlength="2"> y);</p> `,
                answer: `*`,
            },

            {
                title: `Create a variable called x, assign the value 10 to it.`,
                question: `<p>let <input type="text"  maxlength="2"> = 10;</p> `,
                answer: `x`,
            },
            {
                title: `Divide 10 with 5, and print the result:`,
                question: `<p>let x = 10;<br> let y = 20;<br>
                    console.log(x <input type="text"  maxlength="2"> y);</p> `,
                answer: `/`,
            },
            {
                title: `Add 10 with 5, and print the result:`,
                question: `<p>let x = 10;<br> let y = 20;<br>
                    console.log(x <input type="text"  maxlength="2"> y);</p> `,
                answer: `+`,
            },
            {
                title: `Subtract 10 with 5, and print the result:`,
                question: `<p>let x = 10;<br> let y = 20;<br>
                    console.log(x <input type="text"  maxlength="2"> y);</p> `,
                answer: `-`,
            },
            {
                title: `Execute the function named myFunction.`,
                question: `<p>function myFunction() {<br>
                        alert("Hello World!");<br>
                        }<br>
                    <input style="width:140px;" type="text"  maxlength="25">;</p> `,
                answer: `myFunction()`,
            },
            {
                title: `Make the function return "Hello World".`,
                question: `<p>function myFunction() {<br>
                        <input style="width:200px;" type="text"  maxlength="25">;<br>
                        }<br></p> `,
                answer: `return "Hello World"`,
            },
            {
                title: `Make the function display "Hello" in the inner HTML of an element with the ID "demo".`,
                question: `<p>function myFunction() { <br>
                        document.getElementById("demo").<input style="width:150px;" type="text"  maxlength="25"> = "Hello World";<br>
                        }<br></p> `,
                answer: `innerHTML`,
            },

            {
                title: `The button element should do something when someone clicks on it. Try to fix it!`,
                question: `<p>&lt;button <input style="width:100px;" type="text"  maxlength="25"> ="alert('Hello')"&gt;Click me.&lt;/button&gt;<br>
                       </p> `,
                answer: `onclick`,
            },
            {
                title: `The div element should turn red when someone moves the on mouse over it.`,
                question: `<p>&lt;div <input style="width:100px;" type="text"  maxlength="25"> ="this.style.backgroundColor='red'"&gt;myDIV.&lt;/div&gt;<br>
                        </p> `,
                answer: `onmouseover`,
            },
            {
                title: `Fix the if statement to alert "Hello World" if x is greater than y.`,
                question: `<p>if(<input style="width:80px;" type="text"  maxlength="25"> ){<br>
                                alert("Hello World");<br>
                            }</p> `,
                answer: `x > y`,
            },
            {
                title: `Fix the if statement to alert "Hello World" if x is less than y, else alert goodbye.`,
                question: `<p>if(<input style="width:80px;" type="text"  maxlength="25"> ){<br>
                                alert("Hello World");<br>
                            }else{<br>
                                alert("goodbye")<br>}</p> `,
                answer: `x < y`,
            },

        ];
    </script>
    <script src="../Scripts&xml/Exercise.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
</body>

</html>