random quiz questions

This site is best viewed in a modern browser with JavaScript enabled.

dulitul

Hello guys,

This is my first post so I hope I have not done anything wrong. I need your help.

I want to do the following. When a user visits my page I want to have a prompt asking the user how many questions they want to take (from 1 till 10). If the user enters e.g 5 then 5 randomly selected questions should be displayed (out of 10 possible). Also, there must be no duplicates. I would like to inform you that I am not experienced in javascript at all. I have done something but I need your help about the arrays. I have put a comment where I need help. I am also open for other ways on how to do that.

Thanks

html code with 3 questions radio buttons as an example

<html>
<head>


</head>
<title> Submitting information </title> </head>
<body>


 <form id="quiz">
 <br/>

 What's the capital of Bulgaria?

 <br>
 <input type="radio" name="q1" id="city1" value="Sofia"/>
               <label for="city1">Sofia</label> 

<br>

 <input type="radio" name="q1" id="city2" value="Buchurest" />
               <label for="city2">Buchurest</label> <br>

 <input type="radio" name="q1" id="city3" value="Skopie" />
               <label for="city3">Skopie</label>

  <br> <br> <br>

 What's the capital of Mexico?

 <br>
 <input type="radio" name="q2" id="cit1" value="Mexico city"/>
               <label for="cit1">Mexico city</label>

<br>

 <input type="radio" name="q2" id="cit2" value="Karakaz" />
               <label for="cit2">Karakaz</label> <br>

 <input type="radio" name="q2" id="cit3" value="Lisbon" />
               <label for="cit3">Lisbon</label>

   <br> <br> <br>
         Who's the current UK prime minister?

   <br>
  <input type="radio" name="q3" id="qq1" value="David Cameron"/>
               <label for="qq1">David Cameron</label>

<br>

  <input type="radio" name="q3" id="qq2" value="Lloyd George" />
               <label for="qq2">Lloyd George</label> <br>

  <input type="radio" name="q3" id="qq3" value="Gordon Brown" />
               <label for="qq3">Gordon Brown</label>



  </p>
  </form>


 </body>
 </html>

And here is my javascript piece

function randomInt(low, high) 
 // Given   : low <= high 
 // Returns : a random integer in the range [low, high] 
 { 
  return Math.floor(Math.random()*(high-low+1)) + low; 
 }          

    function randomOneOf(list) 
   // Given  : list is a nonempty list (array) 
   // Returns: a random item from the list 
    {    

     return list[randomInt(0, list.length-1)]; 
      }

var global = prompt("Select No of questions which you want to be               
 displayed")

// function to document.write specific No of random questions from a set of questions  (between 1 and 10). 
// For example user may prompt 5 random questions to be displayed out of 10 
function result()
{
    // create an array to store the quiz questions
    var arr = new Array();
    arr[0] = ??               //how to store the quiz questions??. Maybe form('quiz').q1 or ??. Thanks
    arr[1] = ??
    arr[2] = ??
     // .. till 10

    // create another array to store the random number questions that should appear
    var newarr = new Array();

    // finding the first random no.
    var s = function randomOneOf(arr)

    // add the first number to the new array of random numbers
    newarr.push(s);
    n = 1;

    // add the rest of the questions to the array depending on global var 
    //(how many numbers of questions the user wants)

     while (n <= global)
        {
            // find the 2nd random Number
            n = function randomOneOf(arr)
            for (var i = 0; i < newarr.length; i++)
               {
// not allowing duplicates within the random numbers
                    if n.value != newarr[i]
                       {
                            newarr.push(n) 
                            n++
                        }

               }                       

        }

        // displaying the random questions 
            for (var k = 0; k < newarr.length; k++)
                {
                    for j = 0; j < arr.length; j++)

                        if (newarr[k] == arr[j])
                        {

                document.write(newarr[k]);
                        }

                }   
 }

Padonak

try this

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quiz</title>
<style>
body{color:#000;background-color:#fff;padding:30px 50px;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;}
input[type=button],input[type=radio]{cursor:pointer;margin-left:10px;margin-right:10px;}
input[type=text]{text-align:center;}
p{text-align:left;}
span.bld{font-weight:bold;letter-spacing:1px;}
hr.delim{width:100px;color:#ccc;}
#intro{text-align:center;}
</style>
<script src="script.js"></script>
</head>
<body>
<div id="intro"></div>
<div id="quiz"></div>
</body>
</html>

javascript/B

var questions=[
/* [ 'question text' , [array of possible answers] , index of the right answer ] */
['What\'s the capital of Bulgaria?',['Sofia','Buchurest','Skopie'],0],
['What\'s the capital of Mexico?',['Mexico city','Karakaz','Lisbon'],0],
['Who said "I\'ll be back"?',['Arnold','Stallone','Atkinson'],0],
['What is JavaScript?',['A HTML tag','Programming language','A HTML element attribute'],1],
['Can i see the right answers in the page source?',['Yes, I can','Yes, with Photoshop','Only if I read the linked js file and understand it'],2]
];

function doc(id){return document.getElementById(id);}

function intro(){
doc('intro').innerHTML='How many questions from <b>'+questions.length+'</b> possible would you like to answer?<br /><br /><input type="text" id="req" /><input type="button" id="go" value="Go" />';
doc('req').focus();
doc('go').onclick=function(){
var val=doc('req').value;
if(val!='' && val < questions.length+1 && val!=0){build_quiz(val);}
else{doc('req').value='';doc('req').focus();return;}
}
}
// Given   : low <= high
// Returns : a random integer in the range [low, high]
function randomInt(low,high){return Math.floor(Math.random()*(high-low+1))+low;}

function build_quiz(n){
var q_cntr=1,output='<form id="quiz" action="">';
if(n < questions.length){
for(var i=0; i < n; i++){
var index=randomInt(0,questions.length-1);
output+='<p><span class="bld">'+questions[index][0]+'</span>';
output+='<input type="hidden" name="q'+q_cntr+'_rightanswer" value="'+questions[index][1][questions[index][2]]+'">';
var answ=questions[index][1];
for(var k=0; k < answ.length; k++){output+='<br /><input type="radio" name="q'+q_cntr+'" value="'+answ[k]+'"/><i title="question '+q_cntr+'">'+answ[k]+'</i>';}
output+='<hr align="left" class="delim" /></p>';
q_cntr++;
questions.splice(index,1);
}
}

else{
for(var i=0; i < questions.length; i++){
output+='<p><span class="bld">'+questions[i][0]+'</span>';
output+='<input type="hidden" name="q'+q_cntr+'_rightanswer" value="'+questions[index][1][questions[index][2]]+'">';
var answ=questions[i][1];
for(var k=0; k < answ.length; k++){output+='<br /><input type="radio" name="q'+q_cntr+'" value="'+answ[k]+'"/><i title="question '+q_cntr+'">'+answ[k]+'</i>';}
output+='<hr align="left" class="delim" /></p>';
q_cntr++;
}
}
output+='<br /><br /><input type="submit" value="Send" /></form>';
doc('intro').innerHTML='';
doc('quiz').innerHTML=output;
}

window.onload=intro;

dulitul

Thanks very much. That was quick. I've got just one more wish.

After displaying the random questions I would each answer entered by the user should be compared with the correct answer, and the result displayed within the page (either CORRECT or INCORRECT). At the end, the number and percentage of correct guesses should be displayed in the page. How should I do that? Thank you

Padonak

if it will show either the given answer is correct or incorrect each time the user clicks on the radios, the quiz will be useless because they will give you 100% correct results. as i understand, it must be a button (for example, 'Finish the quiz') instead of 'Send'. after clicking on this button the quiz will show its result (correct/incorrect percentage) and the submit ('Send') button. at that stage the quiz must be already inactive to prevent cheating. i'm going to change the code according to the above.

Padonak

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quiz</title>
<style>
body{color:#000;background-color:#fff;padding:30px 50px;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;}
input[type=button],input[type=radio]{cursor:pointer;margin-left:10px;margin-right:10px;}
input[type=text]{text-align:center;}
p{text-align:left;}
span.bld{font-weight:bold;letter-spacing:1px;}
hr.delim{width:100px;color:#ccc;}
#intro{text-align:center;}
#end,#send{cursor:pointer;}
#send{display:none;}
</style>
<script src="script.js"></script>
</head>
<body>
<div id="intro"></div>
<div id="quiz"></div>
</body>
</html>

javascript/B

var questions=[
/* [ 'question text' , [array of possible answers] , index of the right answer ] */
['What\'s the capital of Bulgaria?',['Sofia','Buchurest','Skopie'],0],
['What\'s the capital of Mexico?',['Mexico city','Karakaz','Lisbon'],0],
['Who said "I\'ll be back"?',['Arnold','Stallone','Atkinson'],0],
['What is JavaScript?',['A HTML tag','Programming language','A HTML element attribute'],1],
['Can i see the right answers in the page source?',['Yes, I can','Yes, with Photoshop','Only if I read the linked js file and understand it'],2]
];

function doc(id){return document.getElementById(id);}

function intro(){
var nondigs=/[^\d]/g;
doc('intro').innerHTML='How many questions from <b>'+questions.length+'</b> possible would you like to answer?<br /><br /><input type="text" id="req" /><input type="button" id="go" value="Go" />';
doc('req').onkeyup=function(){var val=this.value;this.value=val.replace(nondigs,'');}
doc('req').focus();
doc('go').onclick=function(){
var val=doc('req').value;
if(val!='' && val <= questions.length && val!=0){build_quiz(val);}
else{doc('req').value='';doc('req').focus();return;}
}
}
// Given   : low <= high
// Returns : a random integer in the range [low, high]
function randomInt(low,high){return Math.floor(Math.random()*(high-low+1))+low;}

function build_quiz(n){
var q_cntr=1,output='<form id="quiz" action="">';
if(n == questions.length){
for(var i=0; i < questions.length; i++){
output+='<p><span class="bld">'+questions[i][0]+'</span>';
output+='<input type="hidden" name="q'+q_cntr+'_rightanswer" id="q'+q_cntr+'_rightanswer" value="'+questions[i][1][questions[i][2]]+'">';
var answ=questions[i][1];
for(var k=0; k < answ.length; k++){output+='<br /><input type="radio" name="q'+q_cntr+'" value="'+answ[k]+'"/><i title="question '+q_cntr+'">'+answ[k]+'</i>';}
output+='<hr align="left" class="delim" /></p>';
q_cntr++;
}
}

else{
for(var i=0; i < n; i++){
var index=randomInt(0,questions.length-1);
output+='<p><span class="bld">'+questions[index][0]+'</span>';
output+='<input type="hidden" name="q'+q_cntr+'_rightanswer" value="'+questions[index][1][questions[index][2]]+'">';
var answ=questions[index][1];
for(var k=0; k < answ.length; k++){output+='<br /><input type="radio" name="q'+q_cntr+'" value="'+answ[k]+'"/><i title="question '+q_cntr+'">'+answ[k]+'</i>';}
output+='<hr align="left" class="delim" /></p>';
q_cntr++;
questions.splice(index,1);
}
}

output+='<br /><br /><div id="results"></div><input id="end" type="button" value="Done" /><input id="send" disabled="disabled" type="submit" value="Send" /></form>';
doc('intro').innerHTML='';
doc('quiz').innerHTML=output;
doc('end').onclick=quizDone;
}

function quizDone(){
var inps=document.getElementsByTagName('input'),cor=0,incor=0,obj;
for(var i=0;i<inps.length,obj=inps[i];i++){
if(obj.type=='radio'){
var answ=document.getElementsByName(obj.name)[0].previousSibling.previousSibling;
if(obj.checked){
if(answ.value===obj.value){answ.previousSibling.style.color='Green';cor++;}
else{answ.previousSibling.style.color='Crimson';incor++;}
}
obj.setAttribute('disabled','disabled');
}
else{continue;}
}
var total=cor+incor,
cor_ending=cor!=1?'s':'',
incor_ending=incor!=1?'s':'',
total_ending=total!=1?'s':'';
if(total>0){
doc('results').innerHTML='<b>Results:</b><br />Correct answer'+cor_ending+' '+cor+' ('+Math.round(cor/total*100)+'%)<br />Incorrect answer'+incor_ending+' '+incor+' ('+Math.round(incor/total*100)+'%)<br />from total '+total+' question'+total_ending+'<br /><br />';
doc('results').scrollIntoView(true);
doc('end').style.display='none';
doc('send').style.display='block';
doc('send').disabled=false;
}
else{location.href=document.location;}
}

window.onload=intro;

live demo

dulitul

Oh. That's great. You are perfect. I can barely read through that properly.

I was wondering whether you can recommend me some good javascript book/online tutorial where I will be able to catch up quickly as I have got just a few (4) lectures on Javascript in my Computer Science class which is obviously not enough to even programme on intermediate level.

Thank you.

Padonak

i hope this article will be useful

haaniii

Thanks for a very useful code,

But I was wondering,

When answering wrong, could you make it show, which one that was the right answer. And could you make the quiz show one question at the time, then move on to the next, and after each question get the result.

Kind of like this one.

http://jsbin.com/eRiSUhIB/1/

But this one doesnt randomize the Questions.

Very thankful for any help

root

haaniii, when requiring help, please start a thread of your own and not resurrect old posts, by all means add a link to that subject, it saves confusion and also if people were at one time subscribed to this thread and forgot to unsubscribe, any activity now results in an email.

Perhaps it might good idea if a mod closes this thread.

JMRKER

Consider this modification and then start another thread using this one as a reference if you have further questions.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by anonymous (http://jsbin.com/eRiSUhIB/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Quiz app</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/quiz.css">
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<style id="jsbin-css">
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
html,
button,
input {
  color: #222;
}
body {
  font-size: 1em;
  line-height: 1.4;
}
#container {
  margin: auto;
  max-width: 640px;
  padding: 0 15px;
}

</style>
</head>
  <body>
    <div id="container">
      <h1>Quiz app</h1>
      <p>There will be no points awarded for unanswered questions.</p>
      <div id="content">
        <h3 id="question"></h3>
        <div id="choices"></div>
        <p><button id="submit"></button></p>
        <p id="score"></p>
      </div>
    </div>
    <script src="js/quiz.js"></script>

<script>
var quiz = [{
  "question": "What is the full form of IP?",
  "choices": ["Internet Provider", "Internet Port", "Internet Protocol"],
  "correct": "Internet Protocol"
}, {
  "question": "Who is the founder of Microsoft?",
  "choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak"],
  "correct": "Bill Gates"
}, {
  "question": "1 byte = ?",
  "choices": ["8 bits", "64 bits", "1024 bits"],
  "correct": "8 bits"
}, {
  "question": "The C programming language was developed by?",
  "choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
  "correct": "Dennis Ritchie"
}, {
  "question": "What does CC mean in emails?",
  "choices": ["Carbon Copy", "Creative Commons", "other"],
  "correct": "Carbon Copy"
}];


// define elements
var content = $("content"),
  questionContainer = $("question"),
  choicesContainer = $("choices"),
  scoreContainer = $("score"),
  submitBtn = $("submit");

// init vars
  var cQarr = [];
  for (var i=0; i<quiz.length; i++) { cQarr[i] = i; } // create sequence and
  for (var i=0; i<cQarr.length; i++) {                // scramble order
    var rnd = Math.floor(Math.random()*cQarr.length);
    var tmp = cQarr[rnd];  cQarr[rnd] = cQarr[i]; cQarr[i] = tmp;
  }
  var currentQuestion = 0,
  score = 0,
  askingQuestion = true;

function $(id) { // shortcut for document.getElementById
  return document.getElementById(id);
}

function askQuestion() {
  var choices = quiz[cQarr[currentQuestion]].choices,
    choicesHtml = "";

  // loop through choices, and create radio buttons
  for (var i = 0; i < choices.length; i++) {
    choicesHtml += "<input type='radio' name='quiz" + currentQuestion +
      "' id='choice" + (i + 1) +
      "' value='" + choices[i] + "'>" +
      " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
  }

  // load the question
  questionContainer.textContent = "Q" + (currentQuestion + 1) + ". " +
    quiz[cQarr[currentQuestion]].question;

  // load the choices
  choicesContainer.innerHTML = choicesHtml;

  // setup for the first time
  if (currentQuestion === 0) {
    scoreContainer.textContent = "Score: 0 right answers out of " +
      quiz.length + " possible.";
    submitBtn.textContent = "Submit Answer";
  }
}

function checkAnswer() {
  // are we asking a question, or proceeding to next question?
  if (askingQuestion) {
    submitBtn.textContent = "Next Question";
    askingQuestion = false;

// determine which radio button they clicked
var userpick,
  correctIndex,
  radios = document.getElementsByName("quiz" + currentQuestion);
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) { // if this radio button is checked
    userpick = radios[i].value;
  }

  // get index of correct answer
  if (radios[i].value == quiz[cQarr[currentQuestion]].correct) {
    correctIndex = i;
  }
}

// setup if they got it right, or wrong
var labelStyle = document.getElementsByTagName("label")[correctIndex].style;
labelStyle.fontWeight = "bold";
if (userpick == quiz[cQarr[currentQuestion]].correct) {
  score++;
  labelStyle.color = "green";
} else {
  labelStyle.color = "red";
}

scoreContainer.textContent = "Score: " + score + " right answers out of " +
  quiz.length + " possible.";
  } else { // move to next question
    // setting up so user can ask a question
    askingQuestion = true;
    // change button text back to "Submit Answer"
    submitBtn.textContent = "Submit Answer";
    // if we're not on last question, increase question number
    if (currentQuestion < quiz.length - 1) {
      currentQuestion++;
      askQuestion();
    } else {
      showFinalResults();
    }
  }
}

function showFinalResults() {
  content.innerHTML = "<h2>You've complited the quiz!</h2>" +
    "<h2>Below are your results:</h2>" +
    "<h2>" + score + " out of " + quiz.length + " questions, " +
    Math.round(score / quiz.length * 100) + "%<h2>";
}

window.addEventListener("load", askQuestion, false);
submitBtn.addEventListener("click", checkAnswer, false);
</script>
<script src="http://static.jsbin.com/js/render/edit.js?3.18.32"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'jsbin.com');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>

</body>
</html>