HomeworkLib
Question

How to use textbox, radio buttons, checkbox, and dropdown list to make up a quiz of...

How to use textbox, radio buttons, checkbox, and dropdown list to make up a quiz of 20 questions ... How to use textbox, radio buttons, checkbox, and dropdown list to make up a quiz of 20 questions ONLY using JavaScript. No Jquery. When the quiz starts, the questions don't appear all at once, it will display one question at a time with a next button, until the last question with Submit button. Finally, when the quiz is finished, display the score and show all the input answers by the users whether correct or incorrect, then display the correct answers. If possible, make to button to allow users to take the quiz again.

Again: the 20 questions are a mixture of textbox, radio button, and dropdownlist type of questions. Not only radio button input type.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

<html>

<head>

<title>Online Quiz</title>

<script type="text/javascript">

function startQuiz(){

var name = document.getElementById("name").value;

var subject = document.getElementById("subject").value;

if(name==""){

alert("Please Enter Name");

}else if(subject==""){

alert("Please Select Subject");

}else{

document.getElementById("namediv").style.display="none";

document.getElementById("first1").style.display="block";

}

}

function showNext(val){

var question = "question"+val;

var question1 = document.getElementsByName(question);

var ischecked_method = false;

for ( var i = 0; i < question1.length; i++) {

if(question1[i].checked) {

ischecked_method = true;

break;

}

}

if(!ischecked_method) {

alert("Please select "+question);

}else{

var n = parseInt(val)+1;

var newdiv = "first"+n;

var divid = "first"+val;

document.getElementById(divid).style.display="none";

document.getElementById(newdiv).style.display="block";

}

}

function result11(){

var question = "question5";

var question1 = document.getElementsByName(question);

var ischecked_method = false;

for ( var i = 0; i < question1.length; i++) {

if(question1[i].checked) {

ischecked_method = true;

break;

}

}

if(!ischecked_method) {

alert("Please select "+question);

}else{

alert("Your score is "+ getScore() +" out of "+ tot);

var r = confirm("Do you want to take quiz again");

if (r == true) {

// txt = "You pressed OK!";

document.getElementById("first5").style.display="none";

var name = document.getElementById("name").value;

//var subject = document.getElementById("subject").value;

document.getElementById("quiz").reset();

document.getElementById("name").value = name;

document.getElementById("first1").style.display="block";

} else {

//txt = "You pressed Cancel!";

document.getElementById("first5").style.display="none";

document.getElementById("quiz").reset();

document.getElementById("namediv").style.display="block";

}

}

}

var answers = ["A","C","B","B","A"],

tot = answers.length;

function getCheckedValue( radioName ){

var radios = document.getElementsByName( radioName ); // Get radio group by-Name

for(var y=0; y<=radios.length; y++)

if(radios[y].checked) return radios[y].value; // return the checked value

}

function getScore(){

var score = 0;

for (var i=1; i<=tot; i++)

if(getCheckedValue("question"+i)===answers[i-1]) score += 1; // increment only

return score;

}

</script>

</head>

<body>

<form id="quiz">

<h2>Online Quiz</h2>

<div id="namediv">

Enter Your Name:<input type="text" id="name" /><br/><br/>

Select Subject:<select id="subject">

<option value="">Select</option>

<option value="Java script" selected>Java script</option>

</select>

<br/><br/>

<input type="checkbox" name="vehicle" checked value="Bike">I have a Knowledge on JavaScript<br>

<input type="checkbox" name="vehicle" value="Car">I have a Knowledge on Jquery<br/><br/>

<input type="button" name="startquiz" id="startquiz" value="startQuiz" onclick="startQuiz()" />

</div>

<div id="first1" style="display:none;">

<ul>

<li>

<h3>How many letters are there in "JS"?</h3>

<input type="radio" name="question1" value="A">2<br>

<input type="radio" name="question1" value="B">1<br>

<input type="radio" name="question1" value="C">3<br>

<input type="radio" name="question1" value="D">4<br>

</li>

</ul>

<input type="button" id="next1" name="next1" value="Next" onclick="showNext('1')" />

</div>

<div id="first2" style="display:none;">

<ul>

<li>

<h3>How many letters are there in "BMX"?</h3>

<input type="radio" name="question2" value="A">2<br>

<input type="radio" name="question2" value="B">1<br>

<input type="radio" name="question2" value="C">3<br>

<input type="radio" name="question2" value="D">4<br>

</li>

</ul>

<input type="button" id="next2" name="next2" value="Next" onclick="showNext('2')" />

</div>

<div id="first3" style="display:none;">

<ul>

<li>

<h3>How many letters are there in "A"?</h3>

<input type="radio" name="question3" value="A">2<br>

<input type="radio" name="question3" value="B">1<br>

<input type="radio" name="question3" value="C">3<br>

<input type="radio" name="question3" value="D">4<br>

</li>

</ul>

<input type="button" id="next3" name="next3" value="Next" onclick="showNext('3')" />

</div>

<div id="first4" style="display:none;">

<ul>

<li>

<h3>Inside which HTML element do we put the JavaScript?</h3>

<input type="radio" name="question4" value="A">scripting<br>

<input type="radio" name="question4" value="B">script<br>

<input type="radio" name="question4" value="C">javascript<br>

<input type="radio" name="question4" value="D">js<br>

</li>

</ul>

<input type="button" id="next4" name="next4" value="Next" onclick="showNext('4')" />

</div>

<div id="first5" style="display:none;">

<ul>

<li>

<h3>Where is the correct place to insert a JavaScript?</h3>

<input type="radio" name="question5" value="A">Both head and body section<br>

<input type="radio" name="question5" value="B">head<br>

<input type="radio" name="question5" value="C">body<br>

<input type="radio" name="question5" value="D">none of the above<br>

</li>

</ul>

<input type="button" id="result" name="result" value="Result" onclick="result11()" />

</div>

</form>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
How to use textbox, radio buttons, checkbox, and dropdown list to make up a quiz of...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • 1.   True/False: Radio buttons are used to allow users to select several options at one time....

    1.   True/False: Radio buttons are used to allow users to select several options at one time. 2.   True/False: A form using the <form></form> tag pair can be placed anywhere within a web page. 3.   True/False: When a form is enhanced with JavaScript, an event handler must be used to evoke the JavaScript code. 4.   True/False: The Common Gateway Interface (CGI) allows web pages to be generated as executable files. 5.   True/False: CGI scripts are normally saved in a folder named...

  • ASP.Net For this exercise, Create a short online quiz. Make sure the quiz has at least...

    ASP.Net For this exercise, Create a short online quiz. Make sure the quiz has at least 3 questions and that each question has at least 3 possible answers. After the questions there should be a button web control that will display the users score. The correct answer should be shown for the ones the user get incorrect. This needs to be done on visual studio using visual basic programming

  • Using Java develop a GUI based simple quiz game. The questions and answers of the game...

    Using Java develop a GUI based simple quiz game. The questions and answers of the game will be stored in a text file (i.e. our database). On the first page the users will be provided with some instructions on how to play the game and next button to go to the next page. On the next page will be a start button to either start the game and an exit button to exit the game. Once the game starts there...

  • Using form events functions to answer this question. Use the attached form html file which contains...

    Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • I am trying to make it so that radio buttons when clicked execute a javascript file....

    I am trying to make it so that radio buttons when clicked execute a javascript file. I have to to have the exercises in external files. Here is what I have so far. I am reusing a script that was used to make radio buttons switch CSS files so I think I have to change the set attribute options. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> 4.2 Output: The first 20 Fibonacci numbers, which are...

  • 1-If you want a user to make a selection from a list of items, and you...

    1-If you want a user to make a selection from a list of items, and you only want them to be able to select ONE item in the list, which type of web form input control should you use? a checkbox a radio button or a drop-down menu a scrollable menu with mutliple selections allowed none of the above 2-<textarea name="contest_entry" rows="5" cols="50"></textarea> The code above will create a: с single line text entry field drop-down menu multiline text entry...

  • abe 2 Use the provided HTML for the following questions. You only need to write the...

    abe 2 Use the provided HTML for the following questions. You only need to write the JavaScript code for the following questions. No need to write a full JavaScript application. Ex. if I said "Set a myVar variable equal to 2" you would simply write myVar = 2; Please write your code in a separate file. The file MUST be named with the following format lastname_firstname.js. Use comments to divide the questions on the single JavaScript file. Example, for question...

  • NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a...

    NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a place in the HTML reserved for < li > elements under the heading “Shopping List” Write a javascript program that will cause whatever the user inputs to be placed in a newly -created < li > tag and the tag placed inside the < ul > element whenever the user clicks the button Your program must not create any < li > tag is...

  • i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...

    i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT