Simple Javascript Quiz
How do I make an simple javascript quiz?
It's a quiz. woot.. What is a simple javascript quiz? How do you make a simple javascript quiz? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.
Simple Javascript Quiz - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Javascript Quiz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <h2 class="quizHeader">Take a Quiz!</h2> <table style="width:583px"> <tr> <td> <div> <p class="question">1. Quiz question #1</p> <ul> <input class="answer" type="radio" name="q1" value="1"> <label id="correctString1">correct answer 1</label> <br> <input class="answer" type="radio" name="q1" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q1" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q1" value="0"> <label>wrong answer</label> </ul> </div> </td> <td> <div> <p class="question">2. Quiz question #2</p> <ul> <input class="answer" type="radio" name="q2" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q2" value="1"> <label id="correctString2">correct answer 2</label> <br> <input class="answer" type="radio" name="q2" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q2" value="0"> <label>wrong answer</label> </ul> </div> </td> </tr> <tr> <td> <div> <p class="question">3. Quiz question #3</p> <ul> <input class="answer" type="radio" name="q3" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q3" value="1"> <label id="correctString3">correct answer 3</label> <br> <input class="answer" type="radio" name="q3" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q3" value="0"> <label>wrong answer</label> </ul> </div> </td> <td> <div> <p class="question">4. Quiz question #4</p> <ul> <input class="answer" type="radio" name="q4" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q4" value="1"> <label id="correctString4">correct answer 4</label> <br> <input class="answer" type="radio" name="q4" value="0"> <label>wrong answer</label> <br> <input class="answer" type="radio" name="q4" value="0"> <label>wrong answer</label> </ul> </div> </td> </tr> </table>
<br/> <div class="submitter"> <input class="quizSubmit" id="submitButton" onClick="submitQuiz()" type="submit" value="Submit" /> </div>
<!--show only wrong answers on submit--> <div class="quizAnswers" id="correctAnswer1"></div> <div class="quizAnswers" id="correctAnswer2"></div> <div class="quizAnswers" id="correctAnswer3"></div> <div class="quizAnswers" id="correctAnswer4"></div>
<!--show score upon submit--> <div> <h2 class="quizScore" id="userScore"></h2> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Javascript Quiz - Script Codes CSS Codes
/* css here */
{ border: 1px dotted black;
}
p.question { font-family: Arial, sans-serif; font-size:20px; color: #2E2E2E; margin-bottom:0px;
}
h2.quizHeader { font-family: Arial, sans-serif; font-weight:normal; font-size:25px; line-height: 27px; margin: 24px 0 12px 0; padding: 0 0 4px 0; border-bottom: 1px solid #a2a2a2;
}
h2.quizScore{ font-family: Arial, sans-serif; font-size:25px;
}
div.quizAnswers{ font-family: Arial, sans-serif; font-size:16px; color: #424242; padding: 4px 0 4px 0;
}
label { font-family: Arial, sans-serif; font-size:14px; color: #424242; vertical-align:top;
}
input.answer[type="radio"] { margin-bottom: 10px;
}
input.quizSubmit[type="submit"] { -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-transition-delay: 0s, 0s; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-property: color, background-color; -webkit-transition-timing-function: ease, ease; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 5px 0px; color: #ffffff; background-color: #c30b0a; margin: 0; border: 0; outline: 0; text-transform:uppercase; height:35px; width:85px; border: 1px solid #5E5E5E; border-radius:5px; }
input.quizSubmit[type="submit"]:hover { color: #ffffff; background: #680f11; text-decoration: none;
}
table { background-color: #F2F2F2; border:1px solid #BDBDBD; border-radius:5px; padding:10px; padding-left:25px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 1px 0px;
}
th {
}
tr {
}
td {
}
.submitter { width:85px;
}
.hide { display:none;
}
/*SFS light red = #c30b0a;
SFS dark red = #9f2026; */
Simple Javascript Quiz - Script Codes JS Codes
// scripts here: function submitQuiz() { console.log('submitted'); // get each answer score function answerScore (qName) { var radiosNo = document.getElementsByName(qName); for (var i = 0, length = radiosNo.length; i < length; i++) { if (radiosNo[i].checked) { // do something with radiosNo var answerValue = Number(radiosNo[i].value); } } // change NaNs to zero if (isNaN(answerValue)) { answerValue = 0; } return answerValue; } // calc score with answerScore function var calcScore = (answerScore('q1') + answerScore('q2') + answerScore('q3') + answerScore('q4')); console.log("CalcScore: " + calcScore); // it works! // function to return correct answer string function correctAnswer (correctStringNo, qNumber) { console.log("qNumber: " + qNumber); // logs 1,2,3,4 after called below return ("The correct answer for question #" + qNumber + ": <strong>" + (document.getElementById(correctStringNo).innerHTML) + "</strong>"); } // print correct answers only if wrong (calls correctAnswer function) if (answerScore('q1') === 0) { document.getElementById('correctAnswer1').innerHTML = correctAnswer('correctString1', 1); } if (answerScore('q2') === 0) { document.getElementById('correctAnswer2').innerHTML = correctAnswer('correctString2', 2); } if (answerScore('q3') === 0) { document.getElementById('correctAnswer3').innerHTML = correctAnswer('correctString3', 3); } if (answerScore('q4') === 0) { document.getElementById('correctAnswer4').innerHTML = correctAnswer('correctString4', 4); } // calculate "possible score" integer var questionCountArray = document.getElementsByClassName('question'); var questionCounter = 0; for (var i = 0, length = questionCountArray.length; i < length; i++) { questionCounter++; } // show score as "score/possible score" var showScore = "Your Score: " + calcScore +"/" + questionCounter; // if 4/4, "perfect score!" if (calcScore === questionCounter) { showScore = showScore + " <strong>Perfect Score!</strong>" }; document.getElementById('userScore').innerHTML = showScore; }
$(document).ready(function() { $('#submitButton').click(function() { $(this).addClass('hide'); });
});
Developer | Harry Sadler |
Username | harrysadlermusic |
Uploaded | November 29, 2022 |
Rating | 3.5 |
Size | 3,427 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Memory Game | 7,463 Kb |
Secret Store - item filter v2 | 5,651 Kb |
Symphony Style Quiz | 9,131 Kb |
SFS hover cross-browser testing | 4,153 Kb |
Audio Button example | 1,631 Kb |
Secret Store - item filter v3 | 5,675 Kb |
Forked to learn rotateY | 2,189 Kb |
Item design 2 | 3,205 Kb |
SFS hover effect v8 | 4,716 Kb |
Simple responsive web layout | 1,840 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!