|
HTML - Creating A Quiz Or Test With Frames
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 Similar TutorialsI've heard many times "don't use frames, there is better ways to accomplish it", and I was wondering, is this just referring to "invisible" frames, or any frames? For example, look at Kingdom of Loathing. They use frames (or what appears to be frames) and I can't see how they could successfully make that site without. If I had to have all the screens scroll as one rather than separate, and couldn't resize when I needed to, it would be extremely annoying. So, frames are bad, or just the invisible ones? Hello, 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. 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>
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 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. The test page: http://www.hindbrain.net/ex10.php I am working on a test page and have a couple of html / css questions. The page is doing what I want (I've only looked at it with firefox so far) except for these 3 items: 1. The page has horizontal and vertical scrollbars. I've tried everything I can think of to get rid of them, but haven't been able to. The offset is 38 pixels in both the horizontal and vertical directions. Where is this offset coming from? 2. If you move the draggable window I can drag it off of the screen. I've tried containment: "parent" but the draggable div jump to the top of the screen with most of it hidden above the screen top. Does anyone know how to get the containment to work? 3. If I comment out the body { margin: 3em; } line the draggable window moves slowly and is jerky. Does anyone know why? thanks, William Yeah I prolly shouldnt do this with ads but im just wondering how to do it, when people click on the ad, using javascript, when they click it a message will prompt saying thanks for clicking the ad, Im not actualyl forcing them to click the ad just a little bit of gratitude Anyone know how to do this? I'm not sure where to put this, moderators. I'm coding up a pre-designed template for a client. But I am having trouble with viewing it on an iPhone or iTouch. If anyone have them, would you be willing to test it out for me and let me know how it looks like? http://66.41.158.217:8888/aef/ Thanks! 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 im a bit new to html coding and need a little help. im coding a script test page in html. i have the first half of the page fine but cant get a proper textarea box under the proper fields. here's what i got........... HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test Script</title> <form> Project: <input type="text" name="Project" /><br /> Version: <input type="text" name="Version" /> </form> </head> <body> <form> <table border="1" bordercolor="" width="1100px" bgcolor=""> <td> Test </td> <td> Task </td> <td> Expected </td> <td> Actual </td> <td> Comments </td> <td> Tester </td> </tr> </table> <textarea rows="5" cols="15"> text area </textarea> </form> </body> </html> How many browsers or which one specifically do you guys test your sites on before going live and is there really a need to do this testing these days especially if using strict XTHML? Hi I know there is a piece of text out there that people use to test their web page. I want to know where can you get that, as i can't seem to find it anyway after several attempts of googling. cheers. Hy all, I've managed to make a pretty decent newsletter using only basic-html and no stylesheet. It looks fine in Outlook and Hotmail, so I'm very curious what it looks like in other mailclients. Do you guys now if there are programs on the internet that enable me to look how my mail shows up in different mailclients? Any advices?! Thanks in advance! Hello guys, i was wondering if any of you knows of :Some sort of book with html tests. Like in math where there are lots of tests and problem books , is there any place where we can find/buy/download HTML test books? Thanks in advance for your answers and since is almost the last day of the year i will rush in wishing you all HAPPY NEW YEAR! need help with my project! n have no idea wht to do.... have to make iq level test on FWP. 1. First in the form ppl will see do u want to check your iq level..yes or no. include options. 2. if user says no then program will be terminated 3. if user says yes then will be asked that plz log in if already a user..else plz register. 4. if user is already a member thn will be directed to the iq level page. 5. After registration user will be asked for id and password. 6. After the registration IQ test will be shown, if the answer is right thn it will be shown in green color, if its wrong thn red color will be shown. 7. After this users iq level will be shown in %. 8. N those who already took it will also be shown on the page n atlast it will say thx.'. i hope u will understand....wat i wrote...need help guys........plzzzzzzzzzzzzzz Hey everybody, I've been wrestling with the classic iframe border issue in IE for the past couple of days and desperately need to know if I've cracked it (browsershots is just getting slower and slower these days..) http://www.eveningtweed.com/lauratest/home.htm Are IE users on PCs seeing a border around the iframe which contains the 'workworkwork' line? I've ensured the CSS for the iframe is correct (frameBorder=0 with the camel case) as well as setting a 0 border on the page loaded into the frame itself. Jez 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! Hello guys, im new here =) So.. I was trying to make a frame with a scrolling bar, like this site >> www.roxdownload.net take a look =) What should i do? Thank you very much =D |
|||||||