Creating an Online Quiz

  • (2 Pages)
  • +
  • 1
  • 2

26 Replies - 2339 Views - Last Post: 26 July 2013 - 06:01 PM

#16 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3616
  • View blog
  • Posts: 12,442
  • Joined: 12-December 12

Re: Creating an Online Quiz

Posted 20 July 2013 - 02:27 PM

Actually, looking through your current code, I can't see where the correct answers are to be found(?).
Was This Post Helpful? 1
  • +
  • -

#17 nlopez796  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 03-July 13

Re: Creating an Online Quiz

Posted 20 July 2013 - 05:26 PM

Now, I'm really confused. This is a project I'm doing, and I was given certain ways of doing this. I'm supposed to use links, and not the actual pictures. So even in using links (and not the actual images), I can move to this as a variable to a different location (the address)?

Also, I created two arrays (one for the questions and one for the answers). I was told I could do the arrays either way - var images = []; and var images[0] = "image link"; So I can't do it this way?
Was This Post Helpful? 0
  • +
  • -

#18 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3616
  • View blog
  • Posts: 12,442
  • Joined: 12-December 12

Re: Creating an Online Quiz

Posted 20 July 2013 - 05:52 PM

I'm afraid you've now lost me.

Quote

I'm supposed to use links, and not the actual pictures.

This doesn't make sense. There are no actual pictures in a web-page, they are always included by providing the src (the address) of the image-file. I was just suggesting that you split this address in two, then locate them with locn + images[0].

You can use two arrays for the questions and answers, but you need some way to know where the answer is in the second array, for each question in the first array. These are called parallel arrays and they are generally a poor choice because, as you have discovered, it is hard to keep them in sync.

Maybe someone else will advise you. Good luck.

This post has been edited by andrewsw: 20 July 2013 - 05:53 PM

Was This Post Helpful? 0
  • +
  • -

#19 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3616
  • View blog
  • Posts: 12,442
  • Joined: 12-December 12

Re: Creating an Online Quiz

Posted 20 July 2013 - 06:20 PM

Where are the correct answers to your questions stored? Unless I've missed something, I can't see them in your code.

Edited: Actually, perhaps the imgAnswers array has the answers for each of the corresponding images in the images array? But when you randomize the answers are you losing track of what the original answer was?

This post has been edited by andrewsw: 20 July 2013 - 06:25 PM

Was This Post Helpful? 0
  • +
  • -

#20 nlopez796  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 03-July 13

Re: Creating an Online Quiz

Posted 20 July 2013 - 07:47 PM

Maybe I'm just not communicating properly, and that's why no one seems to really understand what I'm trying to do. :(

I have no idea how to code the correct answer part with the radio buttons. I've tried playing with it and looking at forums and such, but nothing makes sense to me. I have both arrays in the particular order that should match question and answer together. I just don't really know how to "compare" or match them together (the whole
if(images[0] == imgAnswers[0] { alert('Correct!'); } else { alert('Incorrect!  The correct answer is ' +imgAnswers[0]); } 
. Everything I've tried, nothing seems to work. I need to have one radio button that shows the specific answer, but randomly chosen (which is why everything is random). I was told that the way I had it was correct, I just now need to find the correct answer and choose the radio button to be a correct answer, and everything else to be false. But I don't know how to code it properly to work.

Hopefully you can assist in writing this out.
Thank you in advance.
Was This Post Helpful? 0
  • +
  • -

#21 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3616
  • View blog
  • Posts: 12,442
  • Joined: 12-December 12

Re: Creating an Online Quiz

Posted 21 July 2013 - 03:52 AM

I recommend that you ignore the code and work out the logic first - in your head, using paper and pencil. You won't get it to work just by playing with the code. You need to understand, logically, how it will work.

I have the following very rough outline but, as I say, you need to work out the logic first, in your own mind.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script type="text/javascript">
        var locn = "images/";
        var imgs = [
                    { "question": "elephant.png", "answer" : "grey" },
                    { "question": "cat.png", "answer" : "black" },
                    { "question": "polarbear.png", "answer" : "white" },
                    { "question": "canary.png", "answer" : "yellow" },
                    { "question": "whale.png", "answer" : "blue" },
                    { "question": "parrot.png", "answer" : "green" }
                    // etc..
                    ];
        
    </script>
</head>
<body>
<img src="images/default.png" height="200" width="200">
<form id="medQuiz" action = "#">
    <input type="radio" name="radiobtns" value="" />
    <span id="radio1"></span>
    <input type="radio" name="radiobtns" value="" />
    <span id="radio2"></span>
    <input type="radio" name="radiobtns" value=""/>
    <span id="radio3"></span>
    <input type="radio" name="radiobtns" value=""/>
    <span id="radio4"></span>
</form>
<script type="text/javascript">
    var qa = Math.floor(Math.random() * imgs.length);
    var answers = [];
    answers[0] = imgs[qa].answer;
    var found = false;
    for (var i=0; i < 4; i++) {
        // get the 4 choices/answers
        do {
            var rndAns = Math.floor(Math.random() * imgs.length);
            // check if this answer is already in the answers array
            found = (answers.indexOf(imgs[rndAns].answer) + 1 > -1);
            
        } while (found === true);       // until it is a new answer
        answers.push(imgs[rndAns].answer);
    }
    // randomize the answers array
    // change the image's src to:
    // locn + imgs[qa].question;

    // populate the radiobtns' values with the 4 answers:
    // radiox.innerHTML = answers[x];
    
    // the variable 'qa' enables us to check the correct answer,
    // by referring to this element of the imgs array:
    // theCorrectAnswer == imgs[qa].answer
</script>
</body>
</html>

There is no need for a separate array of answers as you are obtaining the proposed answers from the same collection of (correct) answers in the imgs array.

This post has been edited by andrewsw: 21 July 2013 - 04:01 AM

Was This Post Helpful? 0
  • +
  • -

#22 nlopez796  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 03-July 13

Re: Creating an Online Quiz

Posted 26 July 2013 - 08:44 AM

Thank you guys for your assistance with this. I've been working on this more and more in the past few days, and I was able to get some areas fixed up and working. There's one more section that I can't get working though - which is to find a score / total for the correct answers.

While my statement does give me someone the "Woohoo! You've got the right answer!", it also states that for every answer lol

Can someone help?
Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
<head>  
<meta http-equiv="Content-Language" content="en-us">  
<title>Medical Terminology</title>  
<style>
body 
{
background-image:url('http://1.bp.blogspot.com/-2IYcfF5hlQU/UGLGdSQZcSI/AAAAAAAABhQ/jFDKY6GhU9c/s1600/dna-structure.jpg');
}

body,td,th {
	color: #FFFFFF;
}
img {
height: 400px; width: 400px;
}
</style>
<script type="text/javascript"> 
var correctChoice;
var totalCorrect = 0;
var questionsAsked = 0;

var images = ["http://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Humerus_-_anterior_view.png/480px-Humerus_-_anterior_view.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Frontal_bone_anterior.png/480px-Frontal_bone_anterior.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Hip_bone_-_close-up_-_anterior_view.png/480px-Hip_bone_-_close-up_-_anterior_view.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Maxilla_anterior.png/480px-Maxilla_anterior.png", "http://s3.hubimg.com/u/7292934_f260.jpg", "http://upload.wikimedia.org/wikipedia/commons/3/38/Carpal-boss-3d.jpg", "http://upload.wikimedia.org/wikipedia/commons/9/9d/Right_hand_skeleton.gif", "http://upload.wikimedia.org/wikipedia/commons/7/7b/Intermediate_phalanges.svg", "http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Clavicle_-_anterior_view.png/480px-Clavicle_-_anterior_view.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Left_scapula_-_close-up_-_anterior_view.png/480px-Left_scapula_-_close-up_-_anterior_view.png", "http://upload.wikimedia.org/wikipedia/commons/7/75/Coccyx.JPG", "http://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Body_of_sternum_frontal.png/480px-Body_of_sternum_frontal.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Costal_cartilages_frontal.png/480px-Costal_cartilages_frontal.png", "http://galeri4.uludagsozluk.com/115/femur_157503_m.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Stummelrippe_LWK1.jpg/111px-Stummelrippe_LWK1.jpg", "http://upload.wikimedia.org/wikipedia/commons/d/d0/Footx.jpg", "http://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Calcaneus_Fracture.jpg/640px-Calcaneus_Fracture.jpg", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Zygomatic_bone_anterior.png/480px-Zygomatic_bone_anterior.png", "http://upload.wikimedia.org/wikipedia/commons/c/cf/Temporal_bone.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Occipital_condyle08.png/480px-Occipital_condyle08.png", "http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Tanzpat.svg/169px-Tanzpat.svg.png"];
 
var imgAnswers = ["Humerus", "Frontal", "Coxal", "Maxilla", "Mandible", "Carpals", "Metacarpals", "Phalanges", "Clavicle", "Scapula", "Coccyx", "Sternum", "Costal Cartilage", "Femur", "Vertebrae", "Metatarsals", "Calcaneus", "Zygomatic", "Temporal", "Occipital", "Patella"];

function radioAnswers() {
var qa = Math.floor(Math.random() * images.length);
{
   document.getElementById("myImage").src=images[qa]; 
   }  
var radio1 = imgAnswers[Math.floor(Math.random() * imgAnswers.length)] 
var radio2 = imgAnswers[Math.floor(Math.random() * imgAnswers.length)] 
while (radio1 == radio2) {
radio2 = imgAnswers[Math.floor(Math.random() * imgAnswers.length)] 
}
var radio3 = imgAnswers[Math.floor(Math.random() * imgAnswers.length)] 
while (radio1 == radio3 || radio2 == radio3) {
radio2 = imgAnswers[Math.floor(Math.random() * imgAnswers.length)] 
}
var radio4 = imgAnswers[Math.floor(Math.random() * imgAnswers.length)] 
while (radio1 == radio4 || radio2 == radio4 || radio3 == radio4 ){ 
radio2 = imgAnswers[Math.floor(Math.random() * imgAnswers.length)] 
}
	  document.getElementById("radio1").innerHTML=radio1;
	  document.getElementById("radio2").innerHTML=radio2;	  
	  document.getElementById("radio3").innerHTML=radio3;
	  document.getElementById("radio4").innerHTML=radio4;
	  
	  var randomBtn = Math.floor(Math.random() * 3);
	  switch (randomBtn)
	  {
	  case 0: document.getElementById("radio1").innerHTML=imgAnswers[qa]; break;
	  case 1: document.getElementById("radio2").innerHTML=imgAnswers[qa]; break;
	  case 2: document.getElementById("radio3").innerHTML=imgAnswers[qa]; break;
	  case 3: document.getElementById("radio4").innerHTML=imgAnswers[qa]; break;
	  }
	  correctChoice = imgAnswers[qa];
	  }
	  
	  function correctAnswer(answer) {
	  if(correctChoice == answer) {
alert("Woohoo!\n\nYou're correct!");
totalCorrect += 1;
} else {
alert("Aww so sorry! Correct answer was " +correctChoice);
}
if (questionsAsked < 20) {
                radioAnswers();
            }
            // final question asked - disable button and show final results
            else {
                alert("Quiz complete! You got " + totalCorrect + " correct out of 20.");
                document.getElementById("buttonNext").disabled = true;
            }
            // update totals
            document.getElementById("numberAsked").innerHTML = questionsAsked;
            document.getElementById("numberCorrect").innerHTML = totalCorrect;
        }
		
</script>
</head>
<body onload = "radioAnswers()" align = "center">
<h1>Medical Terminology Quiz:</h1>  
<p>Asking question <span id="numberAsked">1</span> of 20 with <span id="numberCorrect">0</span> answers correct</p>
<p>Please select the best answer for the image shown:</p>
<img id="myImage" src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Right_hand_skeleton.gif">
 <br><br>
 <form id="medQuiz" action = "">
				<input type="radio" name="radiobtns" value="" />
				<span id="radio1"></span>
				<input type="radio" name="radiobtns" value=""/>
				<span id="radio2"></span>
				<input type="radio" name="radiobtns"  value=""/>
				<span id="radio3"></span>
				<input type="radio" name="radiobtns"  value=""/>
				<span id="radio4"></span>
				</form><br />
 <input type="button" name = "submit" onclick="correctAnswer(correctChoice)" value = "Correct Answer">
 <input type="button" name = "buttonNext" onclick = "radioAnswers()" value="Next">
 <br><br><br>
 </body>  
</html> 

Was This Post Helpful? 0
  • +
  • -

#23 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,891
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 26 July 2013 - 11:57 AM

You are always passing in the correct answer to test against the correct answer
correctAnswer(correctChoice)
Was This Post Helpful? 0
  • +
  • -

#24 nlopez796  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 03-July 13

Re: Creating an Online Quiz

Posted 26 July 2013 - 12:07 PM

Reason why I'm asking for help. I'm really not sure what I can change it to. And do the radio buttons need to have onsubmit = "correctAnswer()" also? Or just having the "correct answer" button returning this function enough?
As you should already know, I'm very new at this. Can you provide code or a clue as to what I could do?
Was This Post Helpful? 0
  • +
  • -

#25 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,891
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 26 July 2013 - 12:53 PM

If you are passing the correct answer to test against the correct answer it will always be true.

You need to test against the selected radio button.
Was This Post Helpful? 0
  • +
  • -

#26 nlopez796  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 03-July 13

Re: Creating an Online Quiz

Posted 26 July 2013 - 01:23 PM

That is what I've been trying to do now, and it does not come up.
Can you provide some code here please?
Was This Post Helpful? 0
  • +
  • -

#27 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,891
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 26 July 2013 - 06:01 PM

Get the selected answer:

var radios = document.getElementsByName("radiobtns");
for(var i = 0; i < radios.length; i++) {
    if(radios[i].checked){
       var answer = radios[i].value; 
    } 
}



Then add answer in as the parameter of the correctAnswer function.
correctAnswer(answer);
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2