|
HTML - Quiz Help
hi all im trying to make a quiz on this..here is my code but cant seem to get it to work Grrrrrrrrr
---------------------------------------------------------- it gives the user a mark on how he/she performed. This should be time limited and when finished should also display whether the given answers were wrong or correct. The user will get 2 marks for each correct answer, and -1 for each wrong answer. The quiz should consist of 10 questions. The background colour of the page should change according to the awarded mark. ---------------------------------------------------------- Code: <html><head> <title>Sports Quiz</title><script> //highlight color of answer - can change this color to a hex code or recognized color namevar highlightColor = "#00ff00"; //this should not be changedfunction checkQuestionDropDown(selectGroup) { if (selectGroup[selectGroup.selectedIndex].value == "correct") { return 1; } else { return 0; }} //this should not be changedfunction checkQuestionRadio(radioGroup) { //go through the radio group sent in and determine if radio button//checked is "correct". //return 1 for correct value, 0 for incorrect for (i=0; i<radioGroup.length; i++) { if (radioGroup[i].checked) { if (radioGroup[i].value == "correct") { return 1; } else { return 0; } } }return 0;} //this should not be changedfunction highlightCorrectButton(radioButton) { document.getElementById(radioButton).style.backgroundColor = highlightColor;} function checkQuiz() { //check each question to see if it's right. //The orange highlighted code may need to be changed //you will need to match these question types(Radio/DropDown) //and names (q1, q2, ...) to the ones in your quiz numCorrect = 0; numCorrect += checkQuestionRadio( document.quiz.q1); numCorrect += checkQuestionRadio( document.quiz.q2); numCorrect += checkQuestionRadio( document.quiz.q3); numCorrect += checkQuestionDropDown( document.quiz.q4); //highlight correct answers from radio button groups...use span id name highlightCorrectButton('correct1'); highlightCorrectButton('correct2'); highlightCorrectButton('correct3'); //produce output in textarea. document.quiz.output.value += "You got " + numCorrect + " out of 4 questions correct.\n" + "Your grade is " + Math.round(100*numCorrect/4) + "%\n" + "The answer to question 1 is HyperText Markup Language\n" + "The answer to question 2 is Jefferson City\n" + "The answer to question 3 is talking\n" + "The answer to question 4 is mass\n"; } setTimeout('submitForm()', 1*60*1000);function submitForm() { document.getElementById('form_id').submit();} </script></head><body> <form name="counter"><input type="text" size="8" name="d2"></form> <script> <!-- // var milisec=0 var seconds=30 document.counter.d2.value='60' function display(){ if (milisec<=0){ milisec=9 seconds-=1 } if (seconds<=-1){ milisec=0 seconds+=1 } else milisec-=1 document.counter.d2.value=seconds+"."+milisec setTimeout("display()",100) } display() --> </script> <form name="quiz"><ol><li><b>HTML stands for</b>:<br> <input type="radio" name="q1" value="wrong">How To Make Lines <br><input type="radio" name="q1" value="wrong">Hungry Men Talk Lots <span id="correct1"><br><input type="radio" name="q1" value="correct">HyperText Markup Language</span> <br><input type="radio" name="q1" value="wrong">Hyper Talk Machine Language</li><br><br><li><b>The capital of Missourri is</b>: <br><input type="radio" name="q2" value="wrong">St. Louis <span id="correct2"><br><input type="radio" name="q2" value="correct">Jefferson City</span> <br><input type="radio" name="q2" value="wrong">Missourri City <br><input type="radio" name="q2" value="wrong">Omaha</li><br><br><li><b> What is capital of wales:</b> <span id="correct3"><br><input type="radio" name="q3" value="correct">Cardiff</span> <br><input type="radio" name="q3" value="wrong">hankuva <br><input type="radio" name="q3" value="wrong">hong kong <br><input type="radio" name="q3" value="wrong">egypt</li><br></li><br><li><b> What is capital of spain:</b> <span id="correct3"><br><input type="radio" name="q3" value="correct">Ahuhu</span> <br><input type="radio" name="q3" value="wrong">Bchec <br><input type="radio" name="q3" value="wrong">Cdoddoe <br><input type="radio" name="q3" value="wrong">quebec</li><br></ol><br><br> <center><input type="button" onClick="checkQuiz()" value="check quiz"><hr><textarea cols="80" rows="10" name="output"></textarea></center></form></body></html><html>
<head>
<title>Sports Quiz</title>
<script>
//highlight color of answer - can change this color to a hex code or recognized color name
var highlightColor = "#00ff00";
//this should not be changed
function checkQuestionDropDown(selectGroup) {
if (selectGroup[selectGroup.selectedIndex].value == "correct") {
return 1;
}
else {
return 0;
}
}
//this should not be changed
function checkQuestionRadio(radioGroup) {
//go through the radio group sent in and determine if radio button
//checked is "correct".
//return 1 for correct value, 0 for incorrect
for (i=0; i<radioGroup.length; i++) {
if (radioGroup[i].checked) {
if (radioGroup[i].value == "correct") {
return 1;
}
else {
return 0;
}
}
}
return 0;
}
//this should not be changed
function highlightCorrectButton(radioButton) {
document.getElementById(radioButton).style.backgroundColor = highlightColor;
}
function checkQuiz() {
//check each question to see if it's right.
//The orange highlighted code may need to be changed
//you will need to match these question types(Radio/DropDown)
//and names (q1, q2, ...) to the ones in your quiz
numCorrect = 0;
numCorrect += checkQuestionRadio( document.quiz.q1);
numCorrect += checkQuestionRadio( document.quiz.q2);
numCorrect += checkQuestionRadio( document.quiz.q3);
numCorrect += checkQuestionDropDown( document.quiz.q4);
//highlight correct answers from radio button groups...use span id name
highlightCorrectButton('correct1');
highlightCorrectButton('correct2');
highlightCorrectButton('correct3');
//produce output in textarea.
document.quiz.output.value +=
"You got " + numCorrect + " out of 4 questions correct.\n" +
"Your grade is " + Math.round(100*numCorrect/4) + "%\n" +
"The answer to question 1 is HyperText Markup Language\n" +
"The answer to question 2 is Jefferson City\n" +
"The answer to question 3 is talking\n" +
"The answer to question 4 is mass\n";
}
setTimeout('submitForm()', 1*60*1000);
function submitForm() {
document.getElementById('form_id').submit();
}
</script>
</head>
<body>
<form name="counter"><input type="text" size="8"
name="d2"></form>
<script>
<!--
//
var milisec=0
var seconds=30
document.counter.d2.value='60'
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
}
display()
-->
</script>
<form name="quiz">
<ol>
<li><b>HTML stands for</b>:<br>
<input type="radio" name="q1" value="wrong">How To Make Lines
<br><input type="radio" name="q1" value="wrong">Hungry Men Talk Lots
<span id="correct1"><br><input type="radio" name="q1" value="correct">HyperText Markup Language</span>
<br><input type="radio" name="q1" value="wrong">Hyper Talk Machine Language
</li><br><br>
<li><b>The capital of Missourri is</b>:
<br><input type="radio" name="q2" value="wrong">St. Louis
<span id="correct2"><br><input type="radio" name="q2" value="correct">Jefferson City</span>
<br><input type="radio" name="q2" value="wrong">Missourri City
<br><input type="radio" name="q2" value="wrong">Omaha
</li><br><br>
<li><b> What is capital of wales:</b>
<span id="correct3"><br><input type="radio" name="q3" value="correct">Cardiff</span>
<br><input type="radio" name="q3" value="wrong">hankuva
<br><input type="radio" name="q3" value="wrong">hong kong
<br><input type="radio" name="q3" value="wrong">egypt
</li><br>
</li><br><li><b> What is capital of spain:</b>
<span id="correct3"><br><input type="radio" name="q3" value="correct">Ahuhu</span>
<br><input type="radio" name="q3" value="wrong">Bchec
<br><input type="radio" name="q3" value="wrong">Cdoddoe
<br><input type="radio" name="q3" value="wrong">quebec
</li><br>
</ol><br><br>
<center><input type="button" onClick="checkQuiz()" value="check quiz">
<hr>
<textarea cols="80" rows="10" name="output"></textarea></center>
</form>
</body>
</html>
Similar TutorialsHello, i really need help making a quiz in html. I want to make a site where users can answer questions...but...i am on new ground here. I managed to do some cool things using ap div (thanks to dreaweaver, apdiv is a relatively simple tool for users like me) but now comes the hard part. I made a wrapper in wich i want to put my questions. But i do not know the code, can someone make an example for me? I also want to give grades to users after the test is finished. How do i do this? Let say i have the question : " The color of the sky is?" a. blue b. orange c. purple d. brown How do i write the code for this, and how do i write the code to give grades to the users after the test is finished. Please, please, please do not tell me to look on google because my head is going to explode. I am sorry for my bad english, it is not my first language. I've copied this from a site's source code, but it doesn't work on mine. It directs you to the next page, whatever you answer. Here is the page: http://www.freewebs.com/jaceyanimation/ebook.htm Here is the code i made: HTML Code: <table align=center width='97%' cellspacing=10 cellpadding=2 border=0>
<form action='/signup_basic.php' method=post>
<tr>
<td><b>1. What is the street number of the orders headquarters ?</b></td>
<td><select name='5'>
<option value=1 SELECTED>9</option>
<option value=2>10</option>
<option value=3>11</option>
<option value=4>12</option>
<option value=5>13</option>
<option value=6>14</option>
<option value=7>15</option>
</select></td>
</tr>
<tr>
<td><b>2. What is Luna's last name ?</b></td>
<td><select name='5'>
<option value=1 SELECTED>Lonely</option>
<option value=2>Lilac</option>
<option value=3>Leona</option>
<option value=4>Lee</option>
<option value=5>Lovegood</option>
<option value=6>Lier</option>
<option value=7>Lehman</option>
</select></td>
</tr>
<tr>
<td><b>3. How much is a Unicorn Horn ?</b></td>
<td><select name='2'>
<option value=1 SELECTED>24 Galleons</option>
<option value=2>26 Galleons</option>
<option value=3>28 Galleons</option>
<option value=4>30 Galleons</option>
<option value=5>32 Galleons</option>
<option value=6>9 Sickles</option>
<option value=7>1 Knut</option>
</select></td>
</tr>
<tr><td colspan=2 align=center><br><br>
<input type=hidden name=action value=agree>
<input type=button value=' Go Back ' onClick="location.href='javascript:javascript:history.go(-1)';"> <input type=button value=' Download ' onClick="location.href='http://www.freewebs.com/jaceyanimation/downloadebook.htm';"></td></tr>
</form></table>
The answers a 12 Lovegood 26 Can Someone please fix this Hello! I'm a real beginner when it comes to html, so sorry for my stupid questions. I've started making a logic quiz for my students using the following quiz code that I found online http://student.ccbcmd.edu/~abeiderm/.../quizCode.html http://student.ccbcmd.edu/~abeiderm/tims2005/quiz.html But I have encountered two problems. 1. When I write logical symbols that I want to appear in the textarea for the answer it doesn't print the symbol, only the code. How am I suppose to write the code to get the symbol? My code is now: //produce output in textarea. document.quiz.output.value += "The answer to question 1 is A ∨ ¬ A \n"; 2. I would like to be able to print peoples (in particular my students) answers to a file, so I can use the quiz as a test. Is this possible? Is there any sample of such a code, that I can just copy? thanks in advance! I have just developed a series of quizzes to post on my Bible Web site. It works fine, but I'm wondering if there are any alternative ways of doing what I want. Here's how I designed each quiz. There is a "main" html file that creates two frames: <frameset rows="70%,30%"> <frame src="1SamuelQuiz.html" name="QuizFrame"> <frame src="BlankAnswerPage.html" name="AnswerFrame"> </frameset> Then I created an html file with all the quiz questions in a numbered list (1SamuelQuiz.html). Here's an example of one item from the list: <p>Who was David's father?</p> <p><a href="1SamuelAnswer1.html" target="AnswerFrame">Click here for answer.</a></p> When the user clicks for the answer, it appears in the lower frame, while the questions remain visible in the upper frame. As I said, everything works fine, just as designed. However, this method does require a separate html file for each individual answer. The more quizzes I create like this, the number of files increases at an alarming rate! Is there any alternative design that would still allow the user to click to see an answer while keeping the quiz questions visible? Thanks. Bill I understand this is the HTML section and I'll be posting a little Java. Let's say you're going to take an online quiz to see your IQ. To 'check' the answer your query has to be sent and checked with an existing copy/data, right? If I wanted to see the answer to question three on the IQ test where would I find the existing copy/data? For instance, how would I figure out the answer? HTML Code: <p>
<table width="100%" cellpadding="2" cellspacing="0" border="0">
<tr>
<td class="bLight" nowrap valign="middle">
<!-- Screen Reader Anchor-->
<a name="question_34"><img
src="/images/spacer.gif" width=1 height=1
alt="Question 34 text" border="0"></a>
<span class="questionNumber"> Question 34</span>
</td>
<td class="bLight" align="right" colspan="5" nowrap valign="middle">
<span class="points">2 points</span>
</td>
<td class="bLight" align="right" nowrap valign="middle">
<a href="javascript:saveItem('_12398139_1','34')" class="inlineAction">Save</a>
</td>
</tr>
<tr>
<td valign="middle" align="center" rowspan="2"> </td>
<td colspan=2 valign="top" width="100%">
<label for="True/False-_4495108_1"><!--RsQ_002-->The sky is blue.</label>
</td>
</tr>
<tr>
<td colspan=2 valign="top">
<a name="question_34_answers"><img
src="/images/spacer.gif" width=1 height=1
alt="Question 34 answers" border="0"></a>
<table>
<script type="text/javascript">
formCheckList.addElement(new Check_Answer({ref_label:"34",name:"tf-ans-_12398139_1"}));
</script>
<tr>
<td>
<input type=radio name="tf-ans-_12398139_1" id="tf-ans-_12398139_1_1" value="true" >
</td>
<td><label for="tf-ans-_12398139_1_1">True</label></td>
</tr>
<tr>
<td>
<input type=radio name="tf-ans-_12398139_1" id="tf-ans-_12398139_1_2" value="false" >
</td>
<td><label for="tf-ans-_12398139_1_2">False</label></td>
</tr>
</table>
</td>
</tr>
</table>
I'm new to HTML, so take it easy on me. Hello everyone. Below is the html code for a quiz i want to use for my website. What I want to do is, upon completion of the quiz, have 2 new text-entry forms and 1 "submit" button form appear at the bottom of the page asking the user to input one's name and email address before they can submit the results of their quiz. Both fields would be required.. <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Knowledge Assessment Tool</title> <script src="assessment.js" type="text/javascript"></script> <script src="quiz.js" type="text/javascript"></script> <link rel="stylesheet" href="quiz.css" type="text/css"> </head> <body bgcolor="#FFFFFF"> <p><font color="#2431A2"><u><b>10 Point Quiz</b></u></font></p> <div id="quiz1"></div> <div id="quiz2"></div> ** </body> </html> ** denotes where the text and submit button would show up after the quiz is completed asking the user for name/email address. As you can tell I have no clue how to acheive this. Any help is greatly appreciated. Thank you. Hi, I'm working on a simple website in which I'm required to use two types of forms input on a webpage. I have decided to make a simple quiz which will be designed as follows; -------------------------------------------------------- Q1: The largest mammal on land is: (radio button choices) Q2: Please tick the two correct answers: (tick boxes, four available... only two correct) ---------------------------------------------------------- (BUTTON: Please click here for the answers) ... answers should appear once the above button is pressed... Answers: Q1: B Q2: A * C Is this possible in HTML? Sounds quite straight-forward but I'm no expert so forgive me.. Ps: Is it possible to design a radio button which, depending on the choice, the related-text will appear underneath on the same page? So if they select 'A' then paragraph 'A' will show, if they select 'C' then paragraph 'C' will appear (with the rest hiding)... Thanks! |
|||||||