Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript Quiz

Posted on 2011-10-15
10
Medium Priority
?
326 Views
Last Modified: 2012-05-12
Here's what I need help with: I need the quiz to load the current question. After the user submits their answer the quiz will give them an alert that tells them what they got wrong. I need the quiz to write the next question and allow them to answer that until all the questions are answered.

I've messed around with it and gotten it to write the next question but the page refreshes and it starts again from scratch. My uncle recommended JQuery...
basic2.html
tbquiz2.js
0
Comment
Question by:burnedfaceless
  • 5
  • 5
10 Comments
 

Author Comment

by:burnedfaceless
ID: 36973892
Sorry for uploading those files.

Here is a version that works for one question. After the answer is submitted it grades it and gives the user a response. After that I want it to replace question number 1 with question number 2. I'm guessing I need to use a loop but I'm not sure what kind. Right now it just refreshes the page after the alert.  tbquiz2.js basic2.html
0
 

Author Comment

by:burnedfaceless
ID: 36974994
For the record I tested it earlier and it only "works" with google chrome. I'm very lost and appreciate any help/pointers.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36975098
One HUGE problem is your use of a submit button and a bigger one is the document.write which will purge the page

You need to change

  function winfo()

to use something like this

function winfo()
{
    var output_text ="";
    output_text+= "<h3>" + c + ". " + "Enter " + t + " triad.</h3>";
    output_text+= "<form>" + "<input type = 'text'   size = '3' name = 'root' value = '' maxlength = '3'>";
    output_text+= "<input type = 'text' size = '3' name = 'third' value = ''  maxlength = '3'>" + "<input type = 'text' size = '3' name = 'fifth' value = '' maxlength = '3'>";
    output_text+= "<input type = 'button' value='Check your answer' onclick='first(this.form);'>" + "</form>";
    return output_text;
}

Open in new window


then change the call to
to
   document.getElementById("content").innerHTML=winfo();

and add

<div id="content"></div>

to the html

I will look later for more issues
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36975138
Here - this should work better

<html>
<head>
<title>Quiz</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="tbquiz2.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>

//right and wrong answers are seperated below

   if (x == 0)
      {
         alert("Nice Job!");
         quiz();
         return;
      }
.
.
.



function winfo()
{
    var output_text ="";
    output_text+= "<h3>" + c + ". " + "Enter " + t + " triad.</h3>";
    output_text+= "<form>" + "<input type = 'text'   size = '3' name = 'root' value = '' maxlength = '3'>";
    output_text+= "<input type = 'text' size = '3' name = 'third' value = ''  maxlength = '3'>" + "<input type = 'text' size = '3' name = 'fifth' value = '' maxlength = '3'>";
    output_text+= "<input type = 'button' value='Check your answer' onclick='first(this.form);'>" + "</form>";
    document.getElementById("content").innerHTML = output_text;
}



window.onload=function() {
   quiz();
}   
function quiz() {    
   generate();
   rinfo();
   winfo();
}

Open in new window

0
 

Author Comment

by:burnedfaceless
ID: 36976176
Thanks for helping me. I tried to paste what you had but it's not working. Heres what I have. I really appreciate the help.
basic2.html
tbquiz2.js
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 36976186
Here are mine tbquiz2.js basic2.html

tested in Fx8 Beta on OSX
0
 

Author Comment

by:burnedfaceless
ID: 36976424
Thank you for posting those. Instead of the page refreshing I need it to go to question number 2 then question number 3 until all 68 questions have been posted.
0
 

Author Comment

by:burnedfaceless
ID: 36976439
Got it working thanks you rock man.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36977818
Great :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37335964
Wow. Just wasted some time writing this in your deleted question


That is a very inefficient piece of code.

I created this to have an online version http://jsfiddle.net/mplungjan/YtQmw/

1: [16] and [8] will not work like you thing, you mean new Array(16) if you want to create an array with 16 uninitialised slots.
Since you hardcode your loops, there is no need, so we can start with

var n = [],g=[];

2: you have a LOT of repeating code. Instead create an object:

var questions = [
 {q='Natural notes are those that',a=['Do not contain a sharp or a flat','Are sharp or flat'],c:1},
 {q='Natural notes are those that',a=['Do not contain a sharp or a flat','Are sharp or flat'],c:1},
 {q='Natural notes are those that',a=['Do not contain a sharp or a flat','Are sharp or flat'],c:1},
 {q='Natural notes are those that',a=['Do not contain a sharp or a flat','Are sharp or flat'],c:1},
 {q='Natural notes are those that',a=['Do not contain a sharp or a flat','Are sharp or flat'],c:1}
]; // notice the lack of comma on the last

then you can do

var cnt = n[c];
var qs = questions[cnt]
output_text+="<form><h3>" + c + "."+qs.q+"</h3><select name = 'question' id = '1'>";
for (var i=0;i<qs.a.length;i++) output_text+="<option value = '+(i+1)+'>"+qs.a[ i ]+"</option>";
output_text+="</select><input type = 'button' value = 'Check your answer' onclick = 'grade(this.form,qs.c)'></form>";

to ask the questions

Let me know what you think...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question