Don't wanna be here? Send us removal request.
Text
Quiz class wise
======================================================
Index.html
=====================================================
<!DOCTYPE html><html lang="en"> <head>    <link rel="shortcut icon" href="logo.png" type="image/x-icon">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>QUIZ</title>    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">    <style>        body {            background-color: crimson;        }                .container {            align-items: center;            background-color: rgb(240, 254, 255);            box-shadow: 5px 5px 5px rgb(63, 63, 63);            margin: 30px;            padding: 10px;            border-radius: 20px;            cursor: pointer;        }                .mini-container {            align-items: center;            background-color: rgb(240, 254, 255);            box-shadow: 5px 5px 5px rgb(63, 63, 63);            margin: 30px;            margin-left: 250px;            margin-right: 250px;            padding: 15px;            border-radius: 20px;            cursor: pointer;        }    </style></head> <body>    <center>        <!-- never hide content -->        <div class="home container" style="background-color: rgb(0, 26, 255);color: #fff;">            <h2>QUIZ</h2>        </div>        <!-- never hide content over -->         <!-- instruction content -->        <div class="start-quiz">            <div>                <h3>INSTRUCTIONS</h3>                <h5>TOTAL QUESTIONS = 5</h5>            </div>            <button class="w3-btn w3-light-green w3-hover-green w3-round-xxlarge w3-xlarge w3-padding w3-outline-none btn">PLAY</button><br>            <a href="FeedbackPage.html"><button class="w3-margin w3-btn w3-purple w3-round w3-large">Feedback</button></a>        </div>        <!-- instruction content over -->         <!-- choice of class or standard -->        <div class="w3-hide" id="choice">            <div class="class container">                <h4>Choose Your Class</h4>            </div>            <div class="w3-content container c1">                <h4>1<sup>st</sup></h4>            </div>            <div id="c1">                <strong>                    <div class="mini-container" id="c1e">Easy</div>                    <div class="mini-container" id="c1h">Hard</div>                </strong>            </div>            <div class="w3-content container c2">                <h4>2<sup>nd</sup></h4>            </div>            <div id="c2">                <strong>                    <div class="mini-container" id="c2e">Easy</div>                    <div class="mini-container" id="c2h">Hard</div>                </strong>            </div>            <div class="w3-content container c3">                <h4>3<sup>rd</sup></h4>            </div>            <div id="c3">                <strong>                    <div class="mini-container" id="c3e">Easy</div>                    <div class="mini-container" id="c3h">Hard</div>                </strong>            </div>            <div class="w3-content container c4">                <h4>4<sup>th</sup></h4>            </div>            <div id="c4">                <strong>                    <div class="mini-container" id="c4e">Easy</div>                    <div class="mini-container" id="c4h">Hard</div>                </strong>            </div>            <div class="w3-content container c5">                <h4>5<sup>th</sup></h4>            </div>            <div id="c5">                <strong>                    <div class="mini-container" id="c5e">Easy</div>                    <div class="mini-container" id="c5h">Hard</div>                </strong>            </div>            <div class="w3-content container c6">                <h4>6<sup>th</sup></h4>            </div>            <div id="c6">                <strong>                    <div class="mini-container" id="c6e">Easy</div>                    <div class="mini-container" id="c6h">Hard</div>                </strong>            </div>            <div class="w3-content container c7">                <h4>7<sup>th</sup></h4>            </div>            <div id="c7">                <strong>                    <div class="mini-container" id="c7e">Easy</div>                    <div class="mini-container" id="c7h">Hard</div>                </strong>            </div>            <div class="w3-content container c8">                <h4>8<sup>th</sup></h4>            </div>            <div id="c8">                <strong>                    <div class="mini-container" id="c8e">Easy</div>                    <div class="mini-container" id="c8h">Hard</div>                </strong>            </div>            <div class="w3-content container c9">                <h4>9<sup>th</sup></h4>            </div>            <div id="c9">                <strong>                    <div class="mini-container" id="c9e">Easy</div>                    <div class="mini-container" id="c9h">Hard</div>                </strong>            </div>            <div class="w3-content container c10">                <h4>10<sup>th</sup></h4>            </div>            <div id="c10">                <strong>                    <div class="mini-container" id="c10e">Easy</div>                    <div class="mini-container" id="c10h">Hard</div>                </strong>            </div>        </div>            </center></body><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>        $('.home').click(function(e) {        e.preventDefault();        var name = prompt('Your name', '');        if ((name = 'null') || (name = '')) {            alert('We welcome you')        } else {            alert('Hello ' + name + ', We welcome you')        }    });     $('.class').click(function(e) {        e.preventDefault();        alert('choose your standard')     });     $('.btn').click(function(e) {        e.preventDefault();        $('#c1').hide();        $('#c2').hide();        $('#c3').hide();        $('#c4').hide();        $('#c5').hide();        $('#c6').hide();        $('#c7').hide();        $('#c10').hide();        $('#c8').hide();        $('#c9').hide();        $('.start-quiz').hide();        $('#choice').removeClass('w3-hide');    });     $('.c1').click(function(e) {        e.preventDefault();        $('#c1').toggle();    });     $('.c2').click(function(e) {        e.preventDefault();        $('#c2').toggle();    });     $('.c3').click(function(e) {        e.preventDefault();        $('#c3').toggle();    });     $('.c4').click(function(e) {        e.preventDefault();        $('#c4').toggle();    });     $('.c5').click(function(e) {        e.preventDefault();        $('#c5').toggle();    });     $('.c7').click(function(e) {        e.preventDefault();        $('#c7').toggle();    });     $('.c6').click(function(e) {        e.preventDefault();        $('#c6').toggle();    });     $('.c8').click(function(e) {        e.preventDefault();        $('#c8').toggle();    });     $('.c9').click(function(e) {        e.preventDefault();        $('#c9').toggle();    });     $('.c10').click(function(e) {        e.preventDefault();        $('#c10').toggle();    });     //==================================    //      button click effect     // =================================         $('#c1e').click(function (e) {         e.preventDefault();        window.location.assign('1 class easy.html')    });     $('#c1h').click(function (e) {         e.preventDefault();        window.location.assign('1 class hard.html')    });     $('#c2e').click(function (e) {         e.preventDefault();        window.location.assign('2 class easy.html')    });     $('#c2h').click(function (e) {         e.preventDefault();        window.location.assign('2 class hard.html')    });     $('#c3e').click(function (e) {         e.preventDefault();        window.location.assign('3 class easy.html')    });     $('#c3h').click(function (e) {         e.preventDefault();        window.location.assign('3 class hard.html')    });     $('#c4e').click(function (e) {         e.preventDefault();        window.location.assign('4 class easy.html')    });     $('#c4h').click(function (e) {         e.preventDefault();        window.location.assign('4 class hard.html')    });     $('#c5e').click(function (e) {         e.preventDefault();        window.location.assign('5 class easy.html')    });     $('#c5h').click(function (e) {         e.preventDefault();        window.location.assign('5 class hard.html')    });     $('#c6e').click(function (e) {         e.preventDefault();        window.location.assign('6 class easy.html')    });     $('#c6h').click(function (e) {         e.preventDefault();        window.location.assign('6 class hard.html')    });     $('#c7e').click(function (e) {         e.preventDefault();        window.location.assign('7 class easy.html')    });     $('#c7h').click(function (e) {         e.preventDefault();        window.location.assign('7 class hard.html')    });     $('#c8e').click(function (e) {         e.preventDefault();        window.location.assign('8 class easy.html')    });     $('#c8h').click(function (e) {         e.preventDefault();        window.location.assign('8 class hard.html')    });     $('#c9e').click(function (e) {         e.preventDefault();        window.location.assign('9 class easy.html')    });     $('#c9e').click(function (e) {         e.preventDefault();        window.location.assign('9 class hard.html')    });     $('#c10e').click(function (e) {         e.preventDefault();        window.location.assign('10 class easy.html')    });     $('#c10h').click(function (e) {         e.preventDefault();        window.location.assign('10 class hard.html')    });</script> </html>
==============================================================
1 class easy
=============================================================
<!DOCTYPE html><html lang="en"> <head>    <link rel="shortcut icon" href="../logo.png" type="image/x-icon">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>QUIZ</title>    <link rel="stylesheet" href="Css and Js/w3.css">    <style>        body {            background-color: crimson;        }         .container {            align-items: center;            background-color: rgb(240, 254, 255);            box-shadow: 5px 5px 5px rgb(63, 63, 63);            margin: 30px;            padding: 10px;            border-radius: 20px;            cursor: pointer;        }         .mini-container {            align-items: center;            background-color: rgb(240, 254, 255);            box-shadow: 5px 5px 5px rgb(63, 63, 63);            margin: 30px;            margin-left: 250px;            margin-right: 250px;            padding: 15px;            border-radius: 20px;            cursor: pointer;        }    </style></head> <body>    <center>        <!--=============================                never change         =============================-->        <div class="home container" style="background-color: rgb(0, 26, 255);color: #fff;">            <h2>QUIZ</h2>        </div>        <!--=============================                never change over        =============================-->         <div id="question" class="w3-show">            <div class="w3-content w3-yellow container w3-text-red">                <h2>Q<span id="question-number">1</span>. <span id="question-change">How many hours are there in a day</span>?</h2>                <button class="w3-btn w3-purple w3-round-large w3-outline-none" id="opt1">12 hours</button>                <button class="w3-btn w3-purple w3-round-large w3-outline-none" id="opt2">24 hours</button>                <button class="w3-btn w3-purple w3-round-large w3-outline-none" id="opt3">48 hours</button>                <button class="w3-btn w3-purple w3-round-large w3-outline-none" id="opt4">72 hours</button>            </div>        </div>         <!-- ================                result            ================= -->        <div class="w3-hide" id="result">            <div class="container w3-content">                <h2 class="w3-text-red">                 </h2>            </div>            <div class="container w3-content">                <table>                    <tr>                        <th>Total Questions </th>                        <th id="done">5</th>                    </tr>                    <tr>                        <th>Total Questions Correct</th>                        <th><span id="tick">0</span></th>                    </tr>                    <tr>                        <th>Total Questions wrong</th>                        <th><span id="cross">0</span></th>                    </tr>                </table>            </div>            <div class="container w3-content">                <h2 class="w3-text-red">                 </h2>            </div>            <button class="w3-outline-none w3-btn w3-green w3-xlarge w3-round-large w3-hover-orange w3-margin rebtn"                id="btnre">Try Again</button>        </div>    </center></body><script src="Css and Js/jquery.min.js"></script><script>    // document.getElementById()         // ak code    $('#btnre').click(function (e) {        e.preventDefault();        $('#result').removeClass('w3-show');        $('#result').addClass('w3-hide');        $('#question').removeClass('w3-hide');        $('#question').addClass('w3-show');        document.getElementById('tick').innerHTML = '0';        document.getElementById('cross').innerHTML = '0';        document.getElementById('question-number').innerHTML = '0';        changequestion();    });    var que_correct = 0;    var que_wrong = 0;    var total_que = 1;    const ans1 = '24 hours';    const ans2 = 'Arunachal pradesh';    const ans3 = 3;    const ans4 = '29 days';    const ans5 = '26 letters';     $('#opt1').click(function (e) {        e.preventDefault();        var a1 = document.getElementById('opt1');        var a1 = a1.innerHTML;        console.log(a1);        if ((a1 == ans1) || (a1 == ans2) || (a1 == ans3) || (a1 == ans4) || (a1 == ans5)) {            var que_correct = document.getElementById('tick').innerHTML;            var que_correct = eval(que_correct);            var que_correct = eval(que_correct + 1);            document.getElementById('tick').innerHTML = que_correct;            changequestion();        } else {            var que_wrong = document.getElementById('cross').innerHTML;            var que_wrong = eval(que_wrong);            var que_wrong = eval(que_wrong + 1);            document.getElementById('cross').innerHTML = que_wrong;            changequestion();        }    });     function changequestion() {        debugger        var questionNumber = document.getElementById('question-number').innerHTML;        console.log(questionNumber);        var queno = eval(questionNumber);        if (questionNumber < 5) {            var queno = eval(queno + 1);            document.getElementById('question-number').innerHTML = queno;            document.getElementById('done').innerHTML = queno;            if (queno == 1) {                document.getElementById('question-change').innerHTML = 'How many hours are there in a day';                document.getElementById('opt1').innerHTML = '12 hours';                document.getElementById('opt2').innerHTML = '24 hours';                document.getElementById('opt3').innerHTML = '48 hours';                document.getElementById('opt4').innerHTML = '72 hours';            } else if (queno == 2) {                document.getElementById('question-change').innerHTML = 'Which place in India is also known as “Land of Rising Sun”';                document.getElementById('opt1').innerHTML = 'Gujrat';                document.getElementById('opt2').innerHTML = 'Kerala';                document.getElementById('opt3').innerHTML = 'Ladakh';                document.getElementById('opt4').innerHTML = 'Arunachal pradesh';            } else if (queno == 3) {                document.getElementById('question-change').innerHTML = 'How many zeros are there in a two-thousand rupee note';                document.getElementById('opt1').innerHTML = '4';                document.getElementById('opt2').innerHTML = '6';                document.getElementById('opt3').innerHTML = '3';                document.getElementById('opt4').innerHTML = '2';            } else if (queno == 4) {                document.getElementById('question-change').innerHTML = 'How many days are there in the month of February in a leap year';                document.getElementById('opt1').innerHTML = '30 days';                document.getElementById('opt2').innerHTML = '28 days';                document.getElementById('opt3').innerHTML = '29 days';                document.getElementById('opt4').innerHTML = '31 days';            } else if (queno == 5) {                document.getElementById('question-change').innerHTML = 'How many letters are there in the English alphabet';                document.getElementById('opt1').innerHTML = '10 letters';                document.getElementById('opt2').innerHTML = '30 letters';                document.getElementById('opt3').innerHTML = '18 letters';                document.getElementById('opt4').innerHTML = '26 letters';            }            else {                alert('question ended')            }        } else if (queno == 5) {            $('#question').removeClass('w3-show');            $('#question').addClass('w3-hide');            $('#result').removeClass('w3-hide');            $('#result').addClass('w3-show');        }        else {            alert('Technical error')        }    }     $('#opt2').click(function (e) {        e.preventDefault();        var a1 = document.getElementById('opt2');        var a1 = a1.innerHTML;        console.log(a1);        if ((a1 == ans1) || (a1 == ans2) || (a1 == ans3) || (a1 == ans4) || (a1 == ans5)) {            var que_correct = document.getElementById('tick').innerHTML;            var que_correct = eval(que_correct);            var que_correct = eval(que_correct + 1);            document.getElementById('tick').innerHTML = que_correct;            changequestion();        } else {            var que_wrong = document.getElementById('cross').innerHTML;            var que_wrong = eval(que_wrong);            var que_wrong = eval(que_wrong + 1);            document.getElementById('cross').innerHTML = que_wrong;            changequestion();        }    });     $('#opt3').click(function (e) {        e.preventDefault();        var a1 = document.getElementById('opt3');        var a1 = a1.innerHTML;        console.log(a1);        if ((a1 == ans1) || (a1 == ans2) || (a1 == ans3) || (a1 == ans4) || (a1 == ans5)) {            var que_correct = document.getElementById('tick').innerHTML;            var que_correct = eval(que_correct);            var que_correct = eval(que_correct + 1);            document.getElementById('tick').innerHTML = que_correct;            changequestion();        } else {            var que_wrong = document.getElementById('cross').innerHTML;            var que_wrong = eval(que_wrong);            var que_wrong = eval(que_wrong + 1);            document.getElementById('cross').innerHTML = que_wrong;            changequestion();        }    });     $('#opt4').click(function (e) {        e.preventDefault();        var a1 = document.getElementById('opt4');        var a1 = a1.innerHTML;        console.log(a1);        if ((a1 == ans1) || (a1 == ans2) || (a1 == ans3) || (a1 == ans4) || (a1 == ans5)) {            var que_correct = document.getElementById('tick').innerHTML;            var que_correct = eval(que_correct);            var que_correct = eval(que_correct + 1);            document.getElementById('tick').innerHTML = que_correct;            changequestion();        } else {            var que_wrong = document.getElementById('cross').innerHTML;            var que_wrong = eval(que_wrong);            var que_wrong = eval(que_wrong + 1);            document.getElementById('cross').innerHTML = que_wrong;            changequestion();         }    }); </script> </html><!-- @$%&-+()*"':;!?[]{}'" -->
1 note · View note