Creating an Online Quiz

  • (2 Pages)
  • +
  • 1
  • 2

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

#1 nlopez796  Icon User is offline

  • New D.I.C Head

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

Creating an Online Quiz

Posted 03 July 2013 - 11:57 AM

Ok so I'm trying to create an online quiz that's completely random, but being so, how can I find the correct answer to match with the picture? I'm very new to Javascript and web programming, so please bare with me. This is what I have, but how can I get the correct answer instead of just assigning a specific radio to be the correct answer?
Where am I going wrong?

My idea is to create a 20 question quiz (where the question is just an image). I have 4 radio buttons with answers (that randomize with reload and "next" button (which I haven't done the next button yet). I have to match at least one of the random radio buttons with the correct answer but I'm confused on how to get that part. I also have to do a score at the end and highlight the correct answer, but baby steps... I'll figure that out later. Anyone that can help? It is greatly appreciated.
<!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>
</head>
<body onload="answers()">
 <div id="images" align = "middle">
<form id = "medQuiz" onsubmit = "checkAnswers()" action = "">
            <p>Please select the best answer for the image shown:<br />
            <label>
				<input type="radio" name="answerRadio" id="optRadio1" value="" />
				<span id="optSpan1"></span>
			</label>
            <label>
				<input type="radio" name="answerRadio" id="optRadio2" value="" />
				<span id="optSpan2"></span>
            </label>
			<label>
				<input type="radio" name="answerRadio" id="optRadio3" value="" />
				<span id="optSpan3"></span>
            </label>
			<label>
				<input type="radio" name="answerRadio" id="optRadio4" value="" />
				<span id="optSpan4"></span>
            </label><br />
</p>
	<input type = "submit" name = "submit" onsubmit = "return validate()" value = "Submit" />
    </form>
<script type="text/javascript">
var index = 0;

var myAnswers = ["Humerus", "Frontal", "Coccyx", "Maxilla", "Mandible", "Scapula", "Occipital", "Chin", "Tibia", "Clavicle", "Costal Cartilage", "Temporal", "Lips", "Femur", "Phalanges", "Metacarpals", "Tarsals", "Metatarsals", "Phalanges", "Vertebrae", "Spine", "Eyes", "Legs", "Arms", "Fibia", "Skeletal", "Patella", "Calcaneus", "Sternum", "Coxal", "Zygomatic", "Carpals" ];

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/6/6e/Frontal_bone_anterior.png",  "http://upload.wikimedia.org/wikipedia/commons/7/73/Hip_bone_-_close-up_-_anterior_view.png", "http://upload.wikimedia.org/wikipedia/commons/2/24/Maxilla_Simple.png", "http://upload.wikimedia.org/wikipedia/commons/2/25/Mandible_Simple.png", "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/7/73/Costal_cartilages_frontal.png", "http://upload.wikimedia.org/wikipedia/commons/f/f9/Femur_front.png", "http://upload.wikimedia.org/wikipedia/commons/f/f9/Femur_front.png", "http://upload.wikimedia.org/wikipedia/commons/8/8f/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"];

index = Math.floor(Math.random() * images.length);
 document.write("<img src = \"" +images[index]+ "\" />");

function answers() {
var radio1 = myAnswers[Math.floor(Math.random() * myAnswers.length)] 
var radio2 = myAnswers[Math.floor(Math.random() * myAnswers.length)] 
var radio3 = myAnswers[Math.floor(Math.random() * myAnswers.length)] 
var radio4 = myAnswers[Math.floor(Math.random() * myAnswers.length)] 
while (radio1 && radio2 == radio3 && radio4){ 
radio2 = myAnswers[Math.floor(Math.random() * myAnswers.length)] 
		}
	  document.getElementById("optSpan1").innerHTML=radio1
	  document.getElementById("optSpan2").innerHTML=radio2
	  document.getElementById("optSpan3").innerHTML=radio3
	  document.getElementById("optSpan4").innerHTML=radio4
	  }

function checkAnswers() {
var medQuiz = document.getElementById("medQuiz");
if(medQuiz.elements[1].checked)
alert("Woohoo! Your answer is correct!");
else
alert ("Aww so sorry! Your answer is incorrect...");
}	  

function highlight(images){
 document.getElementById('result_' + images).style.backgroundColor=myAnswers[images] != answers[images]?"green":'red';
}

</script>	  
</body>
</html>


This post has been edited by macosxnerd101: 03 July 2013 - 11:58 AM
Reason for edit:: Please use code tags


Is This A Good Question/Topic? 0
  • +

Replies To: Creating an Online Quiz

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3404
  • View blog
  • Posts: 9,625
  • Joined: 08-June 10

Re: Creating an Online Quiz

Posted 03 July 2013 - 01:27 PM

pure JS quizzes always have a problem ... it’s dead easy to cheat (just look into the code).

what I’d do is send the answer (e.g. a unique answer id and the question id) to the server, the server (script) checks, whether the answer is correct and sends the validation result back.

tip: put the answer text into the <label>, because <label>s can reference the according radio button.
Was This Post Helpful? 1
  • +
  • -

#3 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 18 July 2013 - 06:43 PM

Hi, unfortunately I'm still confused and didn't really understand your response.
I did however clean up my file a bit, but I'm still stuck on how to get both arrays to read each other or "compare" so I can get the correct Answer from the radio buttons. Maybe I'm just reading too into it, and not going at it the right way? I would appreciate some coding help to get this function working and get this program to work. I still have a few more steps to go after the randomizing part (I need to score the correct answers at the end too!). Anyway this is what I have so far:

<!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>  
<h1>Medical Terminology Quiz:</h1>  
<p>Please select the best answer for the image shown:</p>
<p>Asking question <span id="numberAsked">1 </span>of 20 with <span id="numberCorrect"> 0 </span> answers correct. </p>
<style>
body 
{
background-image:url('http://1.bp.blogspot.com/-2IYcfF5hlQU/UGLGdSQZcSI/AAAAAAAABhQ/jFDKY6GhU9c/s1600/dna-structure.jpg');
}

body,td,th {
	color: #FFFFFF;
}
</style>
<script type="text/javascript"> 
var score = 0;
var questionsAsked = 0;
var totalCorrect = 0;
var selectionValid = false;
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", "Patella", "Vertebrae", "Metatarsals", "Calcaneus", "Zygomatic", "Temporal", "Occipital"];

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 
	  }
function correctAnswer() {
}

</script>
</head>
<body onload = "radioAnswers()" align = "center">
<img id="myImage" src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Right_hand_skeleton.gif">
 <br><br>
 <form 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" onclick = "correctAnswer()" name = "submit" value = "Correct Answer">
 <input type="button" onclick = "radioAnswers()" value="Next">
 <br><br><br>
 </body>  
</html> 


Any code would be greatly appreciated.
Thank you.
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 409
  • View blog
  • Posts: 1,729
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 18 July 2013 - 07:06 PM

How are you ever going to get A correct answer if all your choices are randomly chosen as well as your image?

You need to think about the logic in this:
  • load page
  • show first question
  • show selection of answers
  • user makes choice and submits
  • check for correct answer
  • notify user of result
  • go to next question


If you randomize the image and all the choices you will rarely get the correct answer in the choices the user sees.

You need to have at least one of the answers in the choices be the correct answer.
Do the answers and images array match keys? If so just make sure the same key is chosen for one of the answers.
Was This Post Helpful? 0
  • +
  • -

#5 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 18 July 2013 - 07:18 PM

For the choices, all of the buttons should have names that were randomly chosen from among the names in that go with other pictures (I have two arrays). One of the choices (but not always the same one) should be the correct answer. Which button holds the correct answer should also be randomly chosen (hence, why everything is randomized). When the user has selected a choice, the page should display something to indicate correct or incorrect (alerts).

Clicking on the “correct answer” button should highlight the choice that was correct (haven't gotten to this part yet). Clicking on the “Next” button should set up the next challenge. There is no need for a start or restart button. The user just has to reload the page. Ideally, when the page is first loaded, it should create a random ordering in which to show the images. That way, each time to the user reloads the page, they will be shown the images in a different order.
Was This Post Helpful? 0
  • +
  • -

#6 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 19 July 2013 - 08:28 AM

Still having a hard time trying to get the correct answer. This is the last part of my project, but I'm at a blank at this point. I tried adding more code to check the answer, but it's not working. Can someone assist me in fixing this section so I can get it to read the correct answer and score?

<!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>  
<h1>Medical Terminology Quiz:</h1>  
<p>Please select the best answer for the image shown:</p>
<p>Asking question <span id="numberAsked">1 </span>of 20 with <span id="numberCorrect"> 0 </span> answers correct. </p>
<span id="quizQuestion"></span>
<style>
body 
{
background-image:url('http://1.bp.blogspot.com/-2IYcfF5hlQU/UGLGdSQZcSI/AAAAAAAABhQ/jFDKY6GhU9c/s1600/dna-structure.jpg');
}

body,td,th {
	color: #FFFFFF;
}
</style>
<script type="text/javascript"> 
var questionsAsked = 0;
var totalCorrect = 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", "Patella", "Vertebrae", "Metatarsals", "Calcaneus", "Zygomatic", "Temporal", "Occipital"];

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 
	  }
	  
 function checkAnswer() {
            if (document.getElementById("radio2").checked && document.getElementById("radio2").value == true) {
                correctAnswer("true");
            }
            else {
                correctAnswer("false");
            }
            // get next question if not asked all yet
            if (questionsAsked < imgAnswers.length) {
                radioAnswers();
            }
            // final question asked - disable button and show final results
            else {
                alert("Quiz complete! You got " + totalCorrect + " correct out of 10.");
                document.getElementById("buttonNext").disabled = true;
            }
            // update totals
            document.getElementById("numberAsked").innerHTML = questionsAsked;
            document.getElementById("numberCorrect").innerHTML = totalCorrect;
        }

function correctAnswer(){
if (images[qa][1] == imgAnswers) {
alert('Correct!');
totalCorrect += 1;
                // answer correct
} else {
alert('Incorrect!');
            }
        }
	  
</script>
</head>
<body onload = "radioAnswers()" align = "center">
<img id="myImage" src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Right_hand_skeleton.gif">
 <br><br>
 <form action = "">
				<input type="radio" name="radiobtns" value="false" />
				<span id="radio1"></span>
				<input type="radio" name="radiobtns" value="true" checked = "checked"/>
				<span id="radio2"></span>
				<input type="radio" name="radiobtns" value="false"/>
				<span id="radio3"></span>
				<input type="radio" name="radiobtns" value="false"/>
				<span id="radio4"></span>
				</form><br />
 <input type="button" onclick = "correctAnswer()" name = "submit" value = "Correct Answer">
 <input id = "buttonNext" type="button" onclick = "radioAnswers()" value="Next">
 <br><br><br>
 </body>  
</html> 


Any coding assistance would be appreciated.
Thanks!
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 409
  • View blog
  • Posts: 1,729
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 19 July 2013 - 10:31 AM

First off, you need to fix your html, You have elements in your head that need to be moved to the body.

As for the javascript,

randomly select a number 1-4 and use that as you radio that will hold the correct answer,

randomly select a number that will be the image and the correct answer, if your array keys line up,

populate the image and the correct answer with the array key that was selected and then randomly select the remainder of the radios with false answers.


once you do this you shoud be able to check the selection against the random number you selected for the correct answer.
Was This Post Helpful? 0
  • +
  • -

#8 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 19 July 2013 - 11:53 AM

What do you mean by array keys? Both arrays just have the elements..
Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 409
  • View blog
  • Posts: 1,729
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 19 July 2013 - 12:11 PM

Arrays are built on a key=>value basis.

The key can be a number or text.

So when you do array[0] you are choosing the value stored in array with the key of 0.
Was This Post Helpful? 0
  • +
  • -

#10 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 19 July 2013 - 12:19 PM

Oh, gotcha.. sorry, didn't realize they were called keys.
Thanks, fr your help.
Let me keep working on this and see what I can come up with.
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 409
  • View blog
  • Posts: 1,729
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 19 July 2013 - 12:21 PM

Keep in mind you need to have a constant for the img and correct answer.
Was This Post Helpful? 0
  • +
  • -

#12 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 - 09:17 AM

I'm stuck on the code. Can someone actually tell me where I'm wrong in the javascript code?
I can't get it to run. I need code to figure out where I'm going wrong. I know what I need to do for it, I'm just stuck on the code. Where am I going wrong?
Was This Post Helpful? 0
  • +
  • -

#13 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 409
  • View blog
  • Posts: 1,729
  • Joined: 30-April 10

Re: Creating an Online Quiz

Posted 20 July 2013 - 12:44 PM

Have you changed the previously posted code? If so please post it.
Was This Post Helpful? 0
  • +
  • -

#14 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 - 01:08 PM

It's pretty much the same, because I'm stuck, as I've said before. I've been trying to play with the correctAnswer function to see if I can get something at least, but nothing.

<!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>  
<h1>Medical Terminology Quiz:</h1>  
<style>
body 
{
background-image:url('http://1.bp.blogspot.com/-2IYcfF5hlQU/UGLGdSQZcSI/AAAAAAAABhQ/jFDKY6GhU9c/s1600/dna-structure.jpg');
}

body,td,th {
	color: #FFFFFF;
}
</style>
<script type="text/javascript"> 
var questionsAsked = 0;
var totalCorrect = 0;
selectionValid = false;

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", "Patella", "Vertebrae", "Metatarsals", "Calcaneus", "Zygomatic", "Temporal", "Occipital"];

var numQuestionsAsked = ["no"];

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 
	  }
		
function correctAnswer() {
var medQuiz = document.getElementById("medQuiz");
if (document.getElementById('medQuiz').radiobtns[0].checked && images.elements[0] == imgAnswers[0]) {
alert("Correct!");
} else {
alert("Incorrect! Correct Answer is " +imgAnswers[0]);
}
// get next question if not asked all yet
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">
<p>Please select the best answer for the image shown:</p>
<p>Asking question <span id="numberAsked">1 </span>of 20 with <span id="numberCorrect"> 0 </span> answers correct. </p>
<span id="quizQuestion"></span>
<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></label>
				<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" onsubmit = "correctAnswer()" name = "submit" value = "Correct Answer">
 <input id = "buttonNext" type="button" onclick = "radioAnswers()" value="Next">
 <br><br><br>
 </body>  
</html> 


Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,599
  • Joined: 12-December 12

Re: Creating an Online Quiz

Posted 20 July 2013 - 02:06 PM

I don't have the answer to your current code-issue but I can offer some advice about how I might approach this. Feel free to ignore most of this if you want to continue with your code as-is (particularly as I haven't studied your code in detail.)

All of your images are coming from the same location. I would move this location to a separate variable, and just add it back in when displaying the images. This will make the code easier to read and, therefore, to maintain.

var locn = "http://upload.wikimedia.org/wikipedia/commons/";

I would create an array of objects. Each object would have properties for the image-src (without the location), and the correct answer.

I would create an array and put the correct answer into it. Then I would randomly select 3 other answers, each time checking that it wasn't the correct answer (which is already in the array) or another answer that has already been chosen. That is, randomly select an answer, but check each time that it isn't already in the answers' array. Then create random numbers 0..3 to place these possible answers in random order on the page.

When the user answers the question we can just check whether this is the correct answer stored in the original array. We need a variable as well to remember which question we are currently asking.

Anyway, good luck.

PS This approach also has the added advantage of not using parallel arrays, which may be the root-cause of your issues.

This post has been edited by andrewsw: 20 July 2013 - 02:40 PM

Was This Post Helpful? 1
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2