計算隨機測驗的分數

Question

我正在制作一個可以隨機回答問題的測驗頁面，但是評分不起作用。 我的returnScore（）函數有問題，但是我不知道它是什么。

 /** * Author: Khang Trinh * Target: register.html * Created: 20 Apr 2018 * Last updated: 23 Apr 2018 */ "use strict"; //Enhancement 1: Quiz randomizer var QUsed = []; function getQuestion(questionNumber) { var questionTarget = "question" + questionNumber.toString(); var questionContent = document.getElementById(questionTarget); while (QUsed.length < 5) { var QNumber = Math.floor(Math.random() * 9) + 1; if (QUsed.indexOf(QNumber) > -1) continue; QUsed[QUsed.length] = QNumber; } if (QUsed[questionNumber] == 1) { questionContent.innerHTML = "When was the first Blog created?"; var dateInput = document.createElement("input"); dateInput.type = "date"; dateInput.id = "q1"; questionContent.parentNode.insertBefore(dateInput, questionContent.nextSibling); //mimicing jQuery insertAfter function learned from //https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib questionContent.insertAdjacentText("afterend", "Please select "); } else if (QUsed[questionNumber] == 2) { questionContent.innerHTML = "A blog is similar to a website to a certain extent."; var radioOption = ["True", "False", "Debatable"]; for (var i = 0; i < 3; i++) { var radio = makeRadioButton("2(a)", radioOption[i], radioOption[i]); radio.id = ("2" + radioOption[i]).toString(); questionContent.appendChild(radio); } } else if (QUsed[questionNumber] == 3) { questionContent.innerHTML = "What are the 2 main differences that a blog has but a website doesn't? (needs both answers correct to get marks)"; var checkboxOption = ["Content is updated on a regular basis", "Contains many smaller webpages", "Interactive", "All of the above", "None of the above"]; checkboxOption.reverse(); for (var i = 0; i < 5; i++) { var checkbox = makeCheckbox("(2)Main_differences[]", checkboxOption[i], checkboxOption[i]); var br = document.createElement("br"); checkbox.id = ("3_o" + Math.abs(i - 5)).toString(); questionContent.parentNode.insertBefore(br, questionContent.nextSibling); questionContent.parentNode.insertBefore(checkbox, questionContent.nextSibling); } } else if (QUsed[questionNumber] == 4) { questionContent.innerHTML = "Who was considered the founding father of blogs?"; var inputText = document.createElement("input"); inputText.id = "q4"; inputText.name = "(3)Blog founder"; questionContent.parentNode.insertBefore(inputText, questionContent.nextSibling); } else if (QUsed[questionNumber] == 5) { questionContent.innerHTML = "Who created the term 'Blog'? (need both answers correct to get marks)"; var option1 = ["Please select", "Jorn Barger", "Peter Merlolz", "Steven Conway", "Peter Merholz", "David Harris", "No one", "Someone else"]; var option2 = ["Please select", "28th Jul 1914", "1st Sep 1939", "6th Dec 1964", "13th Jan 1994", "12th Oct 1999", "Date's not listed", "Who knows when"]; var select1 = document.createElement("select"); var select2 = document.createElement("select"); select1.id = "blog_creator"; select2.id = "blog_date"; questionContent.parentNode.insertBefore(select2, questionContent.nextSibling); questionContent.insertAdjacentText("afterend", " on "); questionContent.parentNode.insertBefore(select1, questionContent.nextSibling); questionContent.insertAdjacentText("afterend", "The term 'blog' was created by "); for (var i = 0; i < option1.length; i++) { var optionOne = document.createElement("option"); optionOne.value = option1[i]; //createElement for select input learned from https://stackoverflow.com/questions/42742761/how-to-create-a-select-in-vues-createelement optionOne.text = option1[i]; select1.appendChild(optionOne); var optionTwo = document.createElement("option"); optionTwo.value = option2[i]; optionTwo.text = option2[i]; select2.appendChild(optionTwo); } } else if (QUsed[questionNumber] == 6) { questionContent.innerHTML = "If a shopping site is updated regularly, it is considered a blog."; var radioOption = ["True", "False", "Debatable"]; for (var i = 0; i < 3; i++) { var radio = makeRadioButton("(6)a", radioOption[i], radioOption[i]); radio.id = ("6" + radioOption[i]).toString(); questionContent.appendChild(radio); } } else if (QUsed[questionNumber] == 7) { questionContent.innerHTML = "What year was the first Vlog created?"; var textInput = document.createElement("input"); textInput.id = "q7"; questionContent.parentNode.insertBefore(textInput, questionContent.nextSibling); } else if (QUsed[questionNumber] == 8) { questionContent.innerHTML = "Where was the 'Weblog' created?"; var inputText = document.createElement("input"); inputText.id = "q8"; questionContent.parentNode.insertBefore(inputText, questionContent.nextSibling); } else if (QUsed[questionNumber] == 9) { questionContent.innerHTML = "Your Facebook personal profile page can be considered a blog."; var radioOption = ["True", "False", "Debatable"]; for (var i = 0; i < 3; i++) { var radio = makeRadioButton("9(a)", radioOption[i], radioOption[i]); radio.id = ("9" + radioOption[i]).toString(); questionContent.appendChild(radio); } } } function makeRadioButton(name, value, text) { var label = document.createElement("label"); var radio = document.createElement("input"); radio.type = "radio"; radio.name = name; radio.value = value; label.appendChild(radio); label.appendChild(document.createTextNode(text)); return label; } function makeCheckbox(name, value, text) { var label = document.createElement("label"); var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = name; checkbox.value = value; label.appendChild(checkbox); label.appendChild(document.createTextNode(text)); return label; } //End of enhancement 1 function validate() { var errMsg = ""; var result = true; var id = document.getElementById("id").value; var fName = document.getElementById("fName").value; var lName = document.getElementById("lName").value; var pt = returnScore(); if (id == "") { errMsg = errMsg + "You need to enter your student ID.\\n"; result = false; } else if (!id.match(/[0-9]{7}|[0-9]{10}/)) { errMsg = errMsg + "Your ID number can only contain 7 or 10 numbers.\\n"; result = false; } if (fName == "") { errMsg = errMsg + "You need to enter your first name.\\n"; result = false; } else if (!fName.match(/^[a-zA-Z- ]{1,25}$/)) { errMsg = errMsg + "Your first name can only contain of 25 alpha characters, hyphens or spaces.\\n"; } if (lName == "") { errMsg = errMsg + "You need to enter your last name.\\n"; result = false; } else if (!lName.match(/^[a-zA-Z- ]{1,25}$/)) { errMsg = errMsg + "Your last name can only contain 25 alpha characters, hyphens or spaces.\\n"; result = false; } if (pt == 0) { errMsg = errMsg + "Try to attempt at least 1 question.\\n"; result = false; } if (errMsg != "") { alert(errMsg); } if (result) { storeResult(id, fName, lName, pt); } return result; } function returnScore() { var pt = 0; if (QUsed.includes(1)) { var q1Input = document.getElementById("q1").value; if (q1Input == "1994-01-23") { pt += 2; } } if (QUsed.includes(2)) { var q2Input = document.getElementById("2True"); if (q2Input.checked == true) { pt += 2; } } if (QUsed.includes(3)) { var q3Input1 = document.getElementById("3_o1").getElementsByTagName("input"); var q3Input2 = document.getElementById("3_o3").getElementsByTagName("input"); if (q3Input.checked == true && q3Input2.checked == true) { pt += 2; } } if (QUsed.includes(4)) { var q4Input = document.getElementById("q4").value; if (q4Input == "Justin Hall") { pt += 2; } } if (QUsed.includes(5)) { var q5Input1 = document.getElementById("blog_creator").value; var q5Input2 = document.getElementById("blog_date").value; if (q5Input == "Peter Merholz" && q5Input2 == "12th Oct 1999") { pt += 2; } } if (QUsed.includes(6)) { var q6Input = document.getElementById("6Debatable").value; if (q6Input == true) { pt += 2; } } if (QUsed.includes(7)) { var q7Input = document.getElementById("q7").value; if (q7Input == "2004") { pt += 2; } } if (QUsed.includes(8)) { var q8Input = document.getElementById("q8").value; if (q8Input == "Robot Wisdom") { pt += 2; } } if (QUsed.includes(9)) { var q9Input = document.getElementById("9True").value; if (q9Input == true) { pt += 2; } } } function storeResult(id, fName, lName, pt) { localStorage.setItem("id", id); localStorage.setItem("fName", fName); localStorage.setItem("lName", lName); localStorage.setItem("pt", pt); } function init() { getQuestion(0); getQuestion(1); getQuestion(2); getQuestion(3); getQuestion(4); var test = document.getElementById("submit"); test.onclick = validate; } window.onload = init; 

 /* filename: layout.css author: Khang Trinh created: 14/3/2018 last modified: 23/3/2018 description: used for index.html, topic.html, quiz.html and enhancements.html */ body { margin: 0; padding: 0; background: url('images/ArticleBackgroundPic.jpg'); font: 11.5pt Arial; width: 100%; height: 100%; } /*Laying out the divs for the website*/ /*Technique learned from https://colintoh.com/blog/display-table-anti-hero*/ .table { display: table; } .cell { display: table-cell; } #welcomeMsg { background: url('images/HeaderImage.png'); background-size: cover; } #welcomeMsg p { margin: 0; text-align: center; font-family: "Times New Roman"; color: #fff; height: 10vw; background: rgba(64, 64, 64, 0.3); /*Opacity background technique learned from https://css-tricks.com/rgba-browser-support/*/ } #title { font-size: 52pt; line-height: 7vw; } header { display: table-row; height: 1px; } footer { width: 100%; position: absolute; display: table-row; background-image: linear-gradient(#1b2830, #090e10); } footer p { color: #fff; text-align: center; font-size: 0.8em; } .mainContent { height: 100%; width: 100%; background: rgba(253, 225, 142, 0.9); } .content { padding: 0 3vw 1vw 3vw; } .Lsidebar, .Rsidebar { width: 13vw; } .Lsidebar { background: url('images/WebsiteBackgroundPic1.png') left top; background-size: contain; background-repeat: repeat-y; } .Rsidebar { background: url('images/WebsiteBackgroundPic2.png') right top; background-size: contain; background-repeat: repeat-y; } div>img { width: 100%; /*This will make the sidebar images scale with the window*/ } /*Some general initialization*/ h1 { font: bold 24pt Helvetica; } p { text-align: justify; } a { text-decoration: none; } legend { font-weight: bold; } sup { /*This is here to prevent superscripts from affecting the line height*/ vertical-align: baseline; position: relative; top: -0.4em; } blockquote { margin: 0 5vw; } .red { color: red; } .mainContent a:not(.menuEg):hover { text-decoration: underline; } .mainContent a:not(.menuEg):link, .mainContent a:not(.menuEg):visited, .mainContent a:not(.menuEg), footer a { color: #0c92b8; } .referrence { font-size: 8pt; } .whisper { font-size: 0.8em; } /*Dropdown menu*/ /*Design idea from https://catalin.red/css3-animated-dropdown-menu/ */ /*The container*/ .dbar { margin: 0; padding: 0; width: 100%; background-color: #1b2830; color: #fff; font: bold 16px Arial; list-style-type: none; } /*Menu buttons*/ .dbar li { display: table-cell; width: 25%; float: left; z-index: 1; } .menu, .menuEg { display: block; padding: 16px 0; color: #fff; text-align: center; background-image: linear-gradient(#1b2830, #090e10); border-right: 1px solid #404040; } /*Dropdowns*/ .dropdownLinks { display: none; position: absolute; background-color: #c3c3c3; font-size: 14px; z-index: 1; } .dropdownLinks a { display: block; padding: 10px; color: #000; text-align: left; } /*This bit makes the dropdown work*/ .dropdown:hover .dropdownLinks { display: block; } .menu:hover { background-color: #2e414f; border-bottom: 3px solid #8efdfb; } .dropdownLinks a:hover { background-color: #f1f1f1; } /*This bit shows the user which site they're on*/ .active { border-bottom: 3px solid #8efdfb; } /*Some animations to make things more interesting*/ /*Concetps learned from https://www.w3schools.com/css/css3_animations.asp*/ .house-with-cloud { position: relative; } .cloud { position: absolute; left: 0; } .fa-cloud { transform: scale(0.01, 0.01); /*Hiding the cloud preparing for the animation*/ } p.ex { margin-bottom: 7vw; } span.ex { font-size: 72pt; text-align: center; } a:hover .fa-cloud, .active .fa-cloud, .egc { animation: float 0.8s infinite linear; } a:hover .fa-home, .active .fa-home, .egh { animation: pulse 0.8s infinite linear; } a:hover .fa-info-circle:not(.action), .active .fa-info-circle, .egi { animation: spin 0.8s infinite linear; } a:hover .fa-question-circle:not(.action), .active .fa-question-circle, .egq { animation: rotate 0.8s infinite linear; } a:hover .fa-star:not(.action), .active .fa-star, .egs { animation: teeter 0.5s infinite linear; } @keyframes float { 100% { transform: translate(80%, -90%); } } @keyframes pulse { 0% { transform: scale(1, 1); } 25% { transform: scaleY(0.8); } 45% { transform: scaleX(0.8); } 70% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes spin { 50% { transform: scale(0.01, 1); color: #8c8c8c; } } @keyframes rotate { 100% { transform: rotate(359deg); } } @keyframes teeter { 25% { transform: rotate(20deg); } 75% { transform: rotate(-20deg); } 100% { transform: rotate(0deg); } } /*Start actions*/ section.table { margin: 0 auto; padding: 2vw; text-align: center; background-color: #121d21; } .start { transition: transform 0.5s; color: #0c92b8; } .start i { padding: 2vw; font-size: 10vw; } .start:hover { transform: translateY(-1.5vw); } /*Content list*/ .contentList li, .contentList ol, .contentList h2 { margin: 0; } .contentList { padding: 10px; border: 1px solid black; background-color: #fce398; } .contentList ol { padding-left: 20px; } /*Aside*/ aside { margin-left: 3vw; border: 1px solid black; width: 25vw; float: right; } details { padding: 0.5vw 0; background-color: #fce398; } summary { text-align: center; cursor: pointer; /*Would've added -moz-user-select:none; somewhere around here to avoid getting unecessary texts highlighted when clicking on the <details>*/ } aside ul { padding-right: 3vw; } aside li:nth-child(odd) { text-align: center; list-style-type: none; } /*Figures and figure captions*/ figure { display: block; } .center { text-align: center; } .example { display: inline-block; width: 45%; height: 45%; } #mosaic { width: 50%; height: auto; } figcaption { text-align: center; font-size: 80%; } /*Tables*/ #BvW { margin-left: auto; margin-right: auto; } #BvW th { background-color: #00c6e5; color: #fff; } #BvW, #BvW th { border: 2px solid black; border-collapse: collapse; } #BvW tr, #BvW td { border: 1px solid black; border-right: 2px solid black; } #BvW tr:nth-child(even) { background-color: #f0f0f0; } #BvW tr:nth-child(odd) { background-color: #fff; } /*btt (back to top) button(for big screens) and links(for small screens)*/ .btt { font-size: 50%; display: inline-block; } #btt { position: fixed; bottom: 0px; right: 0px; padding: 0 16px; background-color: red; z-index: 5; } /*Quiz buttons*/ .quizButton { border: 1px solid transparent; border-radius: 5px; padding: 10px; font-weight: bold; } .submit { background-color: #53ff1a; box-shadow: 3px 3px #1a6600; } .reset { background-color: #a6a6a6; box-shadow: 3px 3px #333333; } .submit:hover { background-color: #39e600; cursor: pointer; } .reset:hover { background-color: #8c8c8c; cursor: pointer; } .submit:active, .reset:active { transform: translateY(2px); } /*Responsive CSS*/ /*Technique learned from https://www.w3schools.com/css/css_rwd_intro.asp*/ @media screen and (max-width: 975px) { * { font-size: 8pt; } #title { font-size: 26pt; line-height: 14vw; } #welcomeMsg { height: 20vw; } aside { display: none; } .dbar { width: 100%; font-size: 10pt; } .dbar li { display: inline-block; width: 100%; } .menu, .menuEg { text-align: center; padding: 10px 10px; } .quiz { display: block; } } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Lab03" /> <meta name="keywords" content="blogs, posts" /> <meta name="author" content="Khang Trinh" /> <title>Take a quiz!</title> <script src="scripts/validate.js"></script> <link rel="stylesheet" href="styles/styles.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body class="table"> <header> <div id="welcomeMsg"> <p><strong><span id="title">EverythingBlog</span><br/>Everything you need to know about blogs is right here! (hopefully)</strong></p> </div> </header> <nav> <ul class="dbar table"> <li><a class="menu" href="index.html"><span class="house-with-cloud"><i class="fa fa-home"></i><i class="fa fa-cloud cloud"></i></span> HOME</a></li> <li class="dropdown"><a href="topic.html" class="menu"><i class="fa fa-info-circle"></i> ABOUT BLOGS <i class="fa fa-caret-down"></i></a> <div class="dropdownLinks"> <a class="dropdownA" href="topic.html#AboutBlogs">What's a blog?</a> <a class="dropdownA" href="topic.html#WhyBlog">Why is it called "Blog"?</a> <a class="dropdownA" href="topic.html#BlogVsWebsite">Website vs Blog</a> <a class="dropdownA" href="topic.html#WhyItMatters">Why blogging matters</a> </div> </li> <li><a class="menu active" href="#"><i class="fa fa-question-circle"></i> QUIZ</a></li> <li><a class="menu" href="enhancements.html"><i class="fa fa-star"></i> ENHANCEMENTS</a></li> </ul> </nav> <!--This div is here to contain the side images and the main content in the middle (wouldn't make sense using an <article> here)--> <div class="mainContent table"> <!--Since I don't know how to make images repeat like backgrounds I had to make divs to give them background pictures so I can make them repeat--> <div class="cell Lsidebar"></div> <article class="cell content quiz"> <h1>Quiz time!</h1> <p>Test your knowledge about blogs!</p> <p>If you haven't read the article about blogs yet, then I suggest you do it <a href="topic.html">here</a>. <span class="whisper">(<em>it'll help you do the questions much better</em>)</span></p> <form id="test" method="post" action="result.html" novalidate="novalidate"> <fieldset> <legend>Personal Details</legend> <label for="id">Student ID</label> <input type="text" id="id" name="Student_ID" maxlength="10" size="10" /> <br/><br/> <label for="fName">First name</label> <input type="text" id="fName" name="First_Name" size="10" /> <label for="lName">Last name</label> <input type="text" id="lName" name="Last_Name" size="10" /> <br/><br/> </fieldset> <fieldset> <legend>Question 1</legend> <p id="question0"></p> </fieldset> <fieldset> <legend>Question 2</legend> <p id="question1"></p> </fieldset> <fieldset> <legend>Question 3</legend> <p id="question2"></p> </fieldset> <fieldset> <legend>Question 4</legend> <p id="question3"></p> </fieldset> <fieldset> <legend>Question 5</legend> <p id="question4"></p> </fieldset> <br/> <button id="submit" class="quizButton submit" type="submit"><i class="fa fa-check"></i> Submit</button> <button class="quizButton reset" type="reset"><i class="fa fa-rotate-left"></i> Reset Fields</button> </form> </article> <div class="cell Rsidebar"></div> </div> <footer> <p>Mark up by: <a href="mailto:102118468@student.swin.edu.au">Khang Trinh</a></p> </footer> </body> </html> 

Answer 1

我發現您的returnScore()函數returnScore()錯誤。

1. returnScore()不返回任何內容，您應該return pt; 在函數的末尾。

2. 在returnScore()您需要將q3Input.checked更改為q3Input1.checked （似乎您忘記了更新變量名）

3. 與上述q5Input == "Peter Merholz"相同的事物應為q5Input1 == "Peter Merholz"

更改這些問題后，您的代碼似乎可以正常工作。