This is a simple JavaScript quiz. Designed and created with Html, css and Javascript. It's not just a quiz, but it also checks and validates answers when you click the submit button below the questions. Enjoy!
A Pen by George Pasparakis on CodePen.
Created
May 2, 2019 08:55
-
-
Save davidoster/b5ac84449e3d8cddb695e73f97de3449 to your computer and use it in GitHub Desktop.
Simple Javascript Quiz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title> Computer Based Test</title> | |
| <link rel="stylesheet" href="simplequiz/css/style.css"> | |
| <script src="file:///C:/Users/Orijajogunlo/Desktop/jquery-1.11.3.js"></script> | |
| <script src="simplequiz/js/script.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Computer Based Test</h1> | |
| <p>Test your knowledge in javascript fundamentals</p> | |
| <div class="test-info"> | |
| <h4>Name: Adeniran Uche Mukhtar</h4> | |
| <h5>Subject: Biology</h5> | |
| <h5>Exam Registration No: CHS/SSS3/2/2016</h5> | |
| <h5>Duration: 1hr 45min</h5> | |
| </div> | |
| </header> | |
| <section> | |
| <div id="results"></div> | |
| <form name="quizForm" onsubmit="submitAnswers(); return false"> | |
| <h3>1. Toad requires ____ to breathe under water?</h3> | |
| <input type="radio" name="q1" value="a" id="q1a"> a. Lungs <br> | |
| <input type="radio" name="q1" value="b" id="q1b"> b. Moist skin<br> | |
| <input type="radio" name="q1" value="c" id="q1c"> c.link <br> | |
| <input type="radio" name="q1" value="d" id="q1d"> d.Gills <br> | |
| <h3>2. Cell is the _________ of life.?</h3> | |
| <input type="radio" name="q2" value="a" id="q2a"> a. DNA <br> | |
| <input type="radio" name="q2" value="b" id="q2b"> b. basic unit<br> | |
| <input type="radio" name="q2" value="c" id="q2c"> c. None of these<br> | |
| <input type="radio" name="q2" value="d" id="q2d"> d. All of the above<br> | |
| <h3>3. Plants convert ____ and water into carbohydrates and oxygen.</h3> | |
| <input type="radio" name="q3" value="a" id="q3a"> a. Carbon monoxide<br> | |
| <input type="radio" name="q3" value="b" id="q3b"> b. carbon <br> | |
| <input type="radio" name="q3" value="c" id="q3c"> c. carbon dioxide<br> | |
| <input type="radio" name="q3" value="d" id="q3d"> d. all of the above<br> | |
| <h3>4.Fungi are _____</h3> | |
| <input type="radio" name="q4" value="a" id="q4a"> a. decomposers<br> | |
| <input type="radio" name="q4" value="b" id="q4b"> b. animals<br> | |
| <input type="radio" name="q4" value="c" id="q4c"> c. autotrophs<br> | |
| <input type="radio" name="q4" value="d" id="q4d">d. plants<br> | |
| <h3>5. JavaScript is a/an ________ language.</h3> | |
| <input type="radio" name="q5" value="a" id="q5a">a. compiled <br> | |
| <input type="radio" name="q5" value="b" id="q5b">b. interpreted<br> | |
| <br><br> | |
| <input type="submit" value="Submit Answers"> | |
| </form> | |
| </section> | |
| <footer> | |
| copyright © 2016, Designed with Love by Isaac | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function submitAnswers(){ | |
| var total = 5; | |
| var score = 0; | |
| //Get user input | |
| var q1 = document.forms["quizForm"] ["q1"].value; | |
| var q2 = document.forms["quizForm"] ["q2"].value; | |
| var q3 = document.forms["quizForm"] ["q3"].value; | |
| var q4 = document.forms["quizForm"] ["q4"].value; | |
| var q5 = document.forms["quizForm"] ["q5"].value; | |
| // Validation | |
| for(var i = 1; i<= total; i++){ | |
| if( eval('q' + i) == null || eval('q' + i) == ''){ | |
| alert("you missed question " + i); | |
| return false; | |
| } | |
| } | |
| //set correct answers | |
| var answers = ["b", "d", "c", "a", "b"] | |
| //check answers | |
| for(var i = 1; i<= total; i++){ | |
| if(eval('q' + i) == answers [i - 1]){ | |
| score++; | |
| } | |
| } | |
| alert('You scored ' + score + " out of " + total); | |
| //display results | |
| var results = document.getElementById('results'); | |
| resutls.innerHTML= '<h3> You scored <span' + score + '</span> out of <span>' + total + '</span></h3>'; | |
| return false; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background-color: #c5d5cb; | |
| color: white; | |
| font-family: 'Arial', sans-serif; | |
| font-size: 14px; | |
| } | |
| h5,h4{ | |
| text-align: left; | |
| } | |
| .container{ | |
| width: 60%; background: #3b3a36; | |
| margin: 20px auto; | |
| overflow: auto; | |
| padding: 25px; | |
| } | |
| /* #199fdb*/ | |
| header{ | |
| text-align: center; | |
| border-bottom: white dashed 1px; | |
| } | |
| header h1{ | |
| margin: 0; | |
| padding:0; | |
| } | |
| header p{ | |
| padding: 0; | |
| margin-top: 5px; | |
| color: white; | |
| } | |
| section{ | |
| min-height: 400px; | |
| } | |
| footer{ | |
| text-align: center; | |
| } | |
| input[type="submit"]{ | |
| background: #173e43; | |
| border: 0; | |
| color: #fff; | |
| padding:10px 15px; | |
| cursor: pointer; | |
| } | |
| #results h3{ | |
| background-color:#f06226; | |
| padding: 10px; | |
| margin: 10px 0; | |
| } | |
| #results span{ | |
| color: #000; | |
| font-weight: bold; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment