0 Replies - 686 Views - Last Post: 20 June 2020 - 10:35 AM

#1 dexterste   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 20-June 20

JQUERY quiz creator

Posted 20 June 2020 - 10:35 AM

Creating quiz with jquery. I was able to create a quiz with help of codepen jquery quiz. Talking about the result summary, I'm looking a way where I could display the summary with all questions, with right and wrong choices like: (screenshot). Below is the html code I tried when useranswer matches correctanaswer.
Appreciate your suggestions.

lib.html


<html>
  <head>
   <link rel="stylesheet" href="lib.css" type="text/css"/>
   <script type="text/javascript" src="jqueryvlib.js"></script>
   <script type="text/javascript" src="lib.js"></script>
  </head>
  
  <body>

<div id="wrapper">
    <div id="quiz">
        <div name="answersFrame" id="answersFrame" class="choices">
            <input type="radio" name="answers" class="choices" value=0>
            <p id="zero" class="pickone"></p>
            <br/>
            <input type="radio" name="answers" class="choices" value=1>
            <p id="one" class="pickone"></p>
            <br/>
            <input type="radio" name="answers" class="choices" value=2>
            <p id="two" class="pickone"></p>
            <br/>
            <input type="radio" name="answers" class="choices" value=3>
            <p id="three" class="pickone"></p>
        </div>
        <div id="next">next</div>
    </div>
                    <div id="table">
                        <div id="score"></div>
		                <div id="summary"></div>
		                <div id="result">		                 
						    <div>
			                    <div class="qtitle">How can you get the type of arguments passed to a function?</div>
								<script>
								    if (useranswer == correctanswer) { </script>
								       <div style="green">using typeof operator</div><script>
								    } else { </script>
									   <div>using typeof operator</div><script>
									}  
									if (useranswer == correctanswer) {</script>
								       <div style="green">using getType function</div><script>
									else { </script>
									   <div>using getType function</div><script>
									} 
									if (useranswer == correctanswer) {</script>
			                           <div style="green">using getType function</div><script>
									else { </script>
									   <div>Both of the above</div><script>
									}
                                    if (useranswer == correctanswer) {</script>	
									   <div style="green">None</div><script>
									else { </script>
									   <div>None</div> <script>
									} 
								</script>
                                <div class="qtitle">Which built-in method returns the character at the specified index?</div>
								<script>
								    if (useranswer == correctanswer) { </script>
								       <div style="green">characterAt()</div><script>
								    } else { </script>
									   <div>characterAt()</div><script>
									}  
									if (useranswer == correctanswer) {</script>
								       <div style="green">getCharAt()</div><script>
									else { </script>
									   <div>getCharAt()</div><script>
									} 
									if (useranswer == correctanswer) {</script>
			                           <div style="green">charAt()</div><script>
									else { </script>
									   <div>charAt()</div><script>
									}
                                    if (useranswer == correctanswer) {</script>	
									   <div style="green">None</div><script>
									else { </script>
									   <div>None</div> <script>
									} 
								</script>												
			                </div>			                
                        </div>					
                </div>
  </body>
</html>



lib.js

var quiz = [{
    question: "How can you get the type of arguments passed to a function?",
    answers: ["using typeof operator", "using getType function", "Both of the above", "None"],
    correctAnswer: 0
}, {
    question: "Which built-in method returns the character at the specified index?",
    answers: ["characterAt()", "getCharAt()", "charAt()", "None"],
    correctAnswer: 2
}]

var i = 0;
var score = 0;

$(document).ready(function () {
    $('#start').on('click', function () {
        $('#questions').text(quiz[i].question);
        $('#zero').text(quiz[i].answers[0]);
        $('#one').text(quiz[i].answers[1]);
        $('#two').text(quiz[i].answers[2]);
        $('#three').text(quiz[i].answers[3]);
        $('#start').remove();
        $('.choices').show('slow');
        $('#next').show('slow');
    });
});

$(document).ready(function () {
    $(document).on('click', '#next', function () {
        var answer = $('input[name="answers"]:checked').val();
        var answerString = quiz[i].answers[answer];
        $('p[class="userAnswer"][value=' + i + ']').text(answerString);
        var correctAnswer = quiz[i].correctAnswer;
        $('p[class="correctAnswer"][value=' + i + ']').text(quiz[i].answers[correctAnswer]);
        if (answer == quiz[i].correctAnswer) {
            score++;
        } else {
            $('tr[class="row"][name=' + i + ']').css('background', '#FE2E64');
        }
        if (!$('input[name="answers"]').is(':checked')) {
            alert("please make a choice");
            return undefined; //stops executing the rest of the code
        }
        i++;

        if (i < 4) {
            $('.choices').css('display', 'none');
            $('#questions').text(quiz[i].question);
            $('#zero').text(quiz[i].answers[0]);
            $('#one').text(quiz[i].answers[1]);
            $('#two').text(quiz[i].answers[2]);
            $('#three').text(quiz[i].answers[3]);
            $('.choices').show('slow');
            $('input[name="answers"]').prop('checked', false);

        }
        if (i > 3) {

            $('#quiz').remove();
            $('#score').text("You have completed the quiz, your score is " + score);//score*(100/i)
            $('#results').fadeIn('fast');
        }


    });
});


Is This A Good Question/Topic? 0
  • +

Page 1 of 1