如何修复此HTML测验？ [英] How can I fix this HTML quiz?
本文介绍了如何修复此HTML测验？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的计算机科学课做一个关于流行文化的测验。我正在使用http://codeactually.com/interactivequiz.html上的说明。我把测验扩展到有二十个问题，而不是四个。页面刷新但不显示等级或其后的任何内容。我该如何解决？以下是代码：
I am making a quiz about Pop Culture for my Computer Science class. I am using directions from http://codeactually.com/interactivequiz.html. I have extended the quiz to have twenty questions, instead of four. The page refreshes but does not display the grade or anything after it. How can I fix it? Here is the code:
<!DOCTYPE html>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oleo+Script">
<link href="https://fonts.googleapis.com/css?family=Italiana" rel="stylesheet">
<metaname="viewport" content="width=device-width">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Indie+Flower">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<style>
html {
background: linear-gradient(to bottom, #cfcdf5,#b4c1f6,#9bc2f7,#82d1f8, #69ebf9);;;
}
body {
color: white;
font: normal 30px 'Indie Flower', cursive;
}
img {
border: ridge;
border-radius: 15px;
}
a href {
color:#6461A0;
text-decoration: none;
}
a:hover {
color: #EFBDEB;
text-decoration: underline;
}
a:visited {
color: #4B0082;
}
h1, h2, h3 {
font-family: 'Luckiest Guy', serif;
text-shadow: 4px 4px 4px #aaa;
}
.topnav {
background-color: #9bc2f7;
overflow: hidden;
}
</style>
<center>
<h1>
HOW MUCH POP CULTURE DO YOU REALLY KNOW?
</h1>
<div class="topnav">
<a href= "https://www.homedepot.com/"> Home</a>
<a href= "https://www.theonion.com/"> News</a>
<a href="https://en.wikipedia.org/wiki/Contact_(1997_American_film)">Contact</a>
<a href="https://en.wikipedia.org/wiki/Popular_culture">About</a>
</div>
</center>
<center><h3>
TAKE THE QUIZ
</h3></center>
<p>http://codeactually.com/interactivequiz.html <br>
<div id="main">
<div id="header">
</div>
<form id="form1">
<fieldset>
<!-- QUESTION 1 -->
<h3>Who is the oldest of the Kardashian sisters?</h3>
<label for="one_string"><input type="radio" name="one" value="0" id="one_string" />Khloe</label>
<label for="one_join"><input type="radio" name="one" value="5" id="one_join" />Kourtney</label>
<label for="one_info"><input type="radio" name="one" value="0" id="one_info" />Kim</label>
<label for="one_condition"><input type="radio" name="one" value="0" id="one_condition"/>North West</label>
<!-- QUESTION 2 -->
<h3>Which married celebrity couple separated in September, 2016?</h3>
<label for="two_string"><input type="radio" name="two" value="5" id="two_string"/>Brad Pitt and Angelina Jolie</label>
<label for="two_join"><input type="radio" name="two" value="0" id="two_join"/>Beyonce and Jay Z</label>
<label for="two_info"><input type="radio" name="two" value="0" id="two_info" />Zayn and Gigi Hadid</label>
<label for="two_condition"><input type="radio" name="two" value="0" id="two_condition" />Justin Bieber and Selena Gomez</label>
<!-- QUESTION 3 -->
<h3> Who topped the Billboard charts with the single "Love Yourself" in February, 2016? </h3>
<label for="three_string"><input type="radio" name="three" value="0" id="three_string" />Shawn Mendes</label>
<label for="three_join"><input type="radio" name="three" value="0" id="three_join" />Jacob Sartorius</label>
<label for="three_info"><input type="radio" name="three" value="0" id="three_info" />Harry Styles</label>
<label for="three_condition"><input type="radio" name="three" value="5" id="three_condition" /> Justin Bieber</label>
<!-- QUESTION 4 -->
<h3>Which song topped the Billboard charts for 14 consecutive weeks in 2015?</h3>
<label for="four_string"><input type="radio" name="four" value="5" id="four_string" />Uptown Funk by Mark Ronson featuring Bruno Mars</label>
<label for="four_join"><input type="radio" name="four" value="0" id="four_join" />Hotline Bling by Drake</label>
<label for="four_info"><input type="radio" name="four" value="0" id="four_info" />Hello by Adele </label>
<label for="four_condition"><input type="radio" name="four" value="0" id="four_condition" />That’s what I like by Bruno Mars</label>
<!-- QUESTION 5 -->
<h3>"Which member of the boy band One Direction left the band in March, 2015?"</h3>
<label for="five_string"><input type="radio" name="five" value="5" id="five_string" />Zayn Malik</label>
<label for="five_join"><input type="radio" name="five" value="0" id="five_join" />Niall Horan</label>
<label for="five_info"><input type="radio" name="five" value="0" id="five_info" />Harry Styles</label>
<label for="five_condition"><input type="radio" name="five" value="0" id="five_condition"/>One of the other guys</label>
<!-- QUESTION 6 -->
<h3>Chris Hemsworth plays this superhero?</h3>
<label for="six_string"><input type="radio" name="six" value="0" id="six_string"/>Green Lantern</label>
<label for="six_join"><input type="radio" name="six" value="0" id="six_join"/>The Hulk</label>
<label for="six_info"><input type="radio" name="six" value="5" id="six_info" />Thor</label>
<label for="six_condition"><input type="radio" name="six" value="0" id="six_condition" />Superman</label>
<!-- QUESTION 7 -->
<h3>Which movie was top at the box office in 2015?</h3>
<label for="seven_string"><input type="radio" name="seven" value="0" id="seven_string" />Avengers: Age of Ultron</label>
<label for="seven_join"><input type="radio" name="seven" value="5" id="seven_join" />Star Wars Ep. VII: The Force Awakens</label>
<label for="seven_info"><input type="radio" name="seven" value="0" id="seven_info" />Inside out</label>
<label for="seven_condition"><input type="radio" name="seven" value="0" id="seven_condition" />Jurassic World</label>
<!-- QUESTION 8 -->
<h3>Where was Vitameatavegamin used?</h3>
<label for="eight_string"><input type="radio" name="eight" value="0" id="eight_string" />Friends</label>
<label for="eight_join"><input type="radio" name="eight" value="0" id="eight_join" />Saved by the bell</label>
<label for="eight_info"><input type="radio" name="eight" value="5" id="eight_info" />I Love Lucy</label>
<label for="eight_condition"><input type="radio" name="eight" value="0" id="eight_condition" />That 70’s show</label>
<!-- QUESTION 9 -->
<h3>What movie did leonardo dicaprio get a oscar for?</h3>
<label for="nine_string"><input type="radio" name="nine" value="0" id="nine_string"/>Titanic</label>
<label for="nine_join"><input type="radio" name="nine" value="5" id="nine_join" />The Revenant</label>
<label for="nine_info"><input type="radio" name="nine" value="0" id="nine_info" />The Great Gatsby</label>
<label for="nine_condition"><input type="radio" name="nine" value="0" id="nine_condition"/>Romeo and Juliet</label>
<!-- QUESTION 10 -->
<h3>How many Kardashian and Jenners are there?</h3>
<label for="ten_string"><input type="radio" name="ten" value="5" id="ten_string"/>17</label>
<label for="ten_join"><input type="radio" name="ten" value="0" id="ten_join"/>21</label>
<label for="ten_info"><input type="radio" name="ten" value="0" id="ten_info" />32</label>
<label for="ten_condition"><input type="radio" name="ten" value="0" id="ten_condition" />20</label>
<!-- QUESTION 11 -->
<h3>What does "yeet" mean (originally)?</h3>
<label for="eleven_string"><input type="radio" name="eleven" value="5" id="eleven_string" />A quick whip of motion of throwing or pulling something forcefully </label>
<label for="eleven_join"><input type="radio" name="eleven" value="0" id="eleven_join" />Can be said to show enthusiasm or excitement</label>
<label for="eleven_info"><input type="radio" name="eleven" value="0" id="eleven_info" />Another word to describe an exciting event such as "shocked"</label>
<label for="eleven_condition"><input type="radio" name="eleven" value="0" id="eleven_condition" />A sarcastic way to say "yes" or "of course"</label>
<!-- QUESTION 12 -->
<h3>What is the current number on the most liked instagram picture?</h3>
<label for="twelve_string"><input type="radio" name="twelve" value="0" id="twelve_string" />17 mil</label>
<label for="twelve_join"><input type="radio" name="twelve" value="0" id="twelve_join" />90 mil</label>
<label for="twelve_info"><input type="radio" name="twelve" value="0" id="twelve_info" />20 mil</label>
<label for="twelve_condition"><input type="radio" name="twelve" value="5" id="twelve_condition" />18 mil</label>
<!-- QUESTION 13 -->
<h3>How many times was the most retweeted post tweeted?</h3>
<label for="thirteen_string"><input type="radio" name="thirteen" value="0" id="thirteen_string" />1,143</label>
<label for="thirteen_join"><input type="radio" name="thirteen" value="0" id="thirteen_join" />2,654</label>
<label for="thirteen_info"><input type="radio" name="thirteen" value="5" id="thirteen_info" />3,638</label>
<label for="thirteen_condition"><input type="radio" name="thirteen" value="0" id="thirteen_condition" />4,702</label>
<!-- QUESTION 14 -->
<h3> Who was involved in the infamous Flashback Mary Scandal?</h3>
<label for="fourteen_string"><input type="radio" name="fourteen" value="0" id="fourteen_string" />Manny Mua</label>
<label for="fourteen"><input type="radio" name="fourteen" value="5" id="fourteen_join" />James Charles</label>
<label for="fourteen_info"><input type="radio" name="fourteen" value="0" id="fourteen_info" />Jeffree Star</label>
<label for="fourteen_condition"><input type="radio" name="fourteen" value="0" id="fourteen_condition" />Gabriel Zamora</label>
<!-- QUESTION 15 -->
<h3>Which of these people has taylor swift dated?</h3>
<label for="fifteen_string"><input type="radio" name="fifteen" value="0" id="fifteen_string" />Harry Styles</label>
<label for="fifteen_join"><input type="radio" name="fifteen" value="0" id="fifteen_join" />Joe Jonas</label>
<label for="fifteen_info"><input type="radio" name="fifteen" value="0" id="fifteen_info" />Jake Gyllenhaal</label>
<label for="fifteen_condition"><input type="radio" name="fifteen" value="5" id="fifteen_condition" />All of the Above</label>
<!-- QUESTION 16 -->
<h3>Finish this song: "Smelly cat, smelly cat..."</h3>
<label for="sixteen_string"><input type="radio" name="sixteen" value="0" id="sixteen_string" />"Why aren't they feeding youuuuu…?"</label>
<label for="sixteen_join"><input type="radio" name="sixteen" value="5" id="sixteen_join" />"What are they feeding youuuuu…?</label>
<label for="sixteen_info"><input type="radio" name="sixteen" value="0" id="sixteen_info" />"Who are youuuuu…?"</label>
<label for="sixteen_condition"><input type="radio" name="sixteen" value="0" id="sixteen_condition" />"What are youuuu…?"</label>
<!-- QUESTION 17 -->
<h3>In what movie is the quote "AS IF" from?</h3>
<label for="seventeen_string"><input type="radio" name="seventeen" value="0" id="seventeen_string" />Mean Girls</label>
<label for="seventeen_join"><input type="radio" name="seventeen" value="0" id="seventeen_join" />10 Things I hate about you</label>
<label for="seventeen_info"><input type="radio" name="seventeen" value="0" id="seventeen_info" />Clueless</label>
<label for="seventeen_condition"><input type="radio" name="seventeen" value="5" id="seventeen_condition" />One of the HSM movies</label>
<!-- QUESTION 18 -->
<h3>How many seasons are the simpsons are there?</h3>
<label for="eighteen_string"><input type="radio" name="eighteen" value="0" id="eighteen_string" />32</label>
<label for="eighteen_join"><input type="radio" name="eighteen" value="0" id="eighteen_join" />20</label>
<label for="eighteen_info"><input type="radio" name="eighteen" value="5" id="eighteen_info" />29</label>
<label for="eighteen_condition"><input type="radio" name="eighteen" value="0" id="eighteen_condition" />30</label>
<!-- QUESTION 19 -->
<h3>What is the slang definition for "Wig"?</h3>
<label for="nineteen_string"><input type="radio" name="nineteen" value="5" id="nineteen_string" />Another way of describing that you're surprised or "shook"</label>
<label for="nineteen_join"><input type="radio" name="nineteen" value="0" id="nineteen_join" />A way of saying something is awesome</label>
<label for="nineteen_info"><input type="radio" name="nineteen" value="0" id="nineteen_info"/>Another word for gross</label>
<label for="nineteen_condition"><input type="radio" name="nineteen" value="0" id="nineteen_condition" />Something you say as a code word for "uncomfortable"
</label>
<!-- QUESTION 20 -->
<h3>How do you think you did on this test?</h3>
<label for="twenty_string"><input type="radio" name="twenty" value="5" id="twenty_string" />YEET</label>
<label for="twenty_join"><input type="radio" name="twenty" value="5" id="twenty_join" /> SHOOK </label>
<label for="twenty_info"><input type="radio" name="twenty" value="5" id="twenty_info" />OMG WIG</label>
<label for="twenty_condition"><input type="radio" name="twenty" value="5" id="twenty_condition" />eh...</label>
<br>
<br><center>
<button type="submit" value="Submit">Submit</button>
</fieldset>
</form>
<p>Your grade is: <span id="grade">__</span></p>
<p id="grade2"></p>
<script>
document.getElementById("form1").onsubmit=function() {
one = parseInt(document.querySelector('input[name = "one"]:checked').value);
two = parseInt(document.querySelector('input[name = "two"]:checked').value);
three = parseInt(document.querySelector('input[name = "three"]:checked').value);
four parseInt(document.querySelector('input[name = "four"]:checked').value);
five = parseInt(document.querySelector('input[name = "five"]:checked').value);
six = parseInt(document.querySelector('input[name = "six"]:checked').value);
seven = parseInt(document.querySelector('input[name = "seven"]:checked').value);
eight = parseInt(document.querySelector('input[name = "eight"]:checked').value);
nine = parseInt(document.querySelector('input[name = "nine"]:checked').value);
ten = parseInt(document.querySelector('input[name = "ten"]:checked').value);
eleven = parseInt(document.querySelector('input[name = "eleven"]:checked').value);
twelve = parseInt(document.querySelector('input[name = "twelve"]:checked').value);
thirteen = parseInt(document.querySelector('input[name = "thirteen"]:checked').value);
fourteen = parseInt(document.querySelector('input[name = "fourteen"]:checked').value);
fifteen = parseInt(document.querySelector('input[name = "fifteen"]:checked').value);
sixteen = parseInt(document.querySelector('input[name = "sixteen"]:checked').value);
seventeen = parseInt(document.querySelector('input[name = "seventeen"]:checked').value);
eighteen = parseInt(document.querySelector('input[name = "eighteen]:checked').value);
nineteen = parseInt(document.querySelector('input[name = "nineteen"]:checked').value);
twenty = parseInt(document.querySelector('input[name = "twenty"]:checked').value);
result = one + two + three + four + five + six + seven + eight + nine + ten + eleven + twelve + thirteen + fourteen + fifteen + sixteen + seventeen + eighteen + nineteen + twenty
document.getElementById("grade").innerHTML = result;
if (result == 0) {result2 = "I don't think you studied."};
if (result == 25) {result2 = "You need to spend more time. Try again."};
if (result == 50) {result2 = "I think you could do better. Try again."};
if (result == 75) {result2 = "So close. Try again."};
if (result == 100) {result2 = "Excellent! You're a JavaScript pro!"};
document.getElementById("grade2").innerHTML = result2;
</script>
我尝试过的事情：
老实说，我不了解很多代码，这使我很难修复它。我试图寻找错别字并仔细检查我是如何组织一切的，但它仍然不起作用。我很困惑。这个项目将于6/10/18到期请帮助！
What I have tried:
I honestly do not understand a lot of the code, which makes it difficult for me to fix it. I have tried to look out for typos and double checked how I organized everything, but it still does not work. I am very confused. This project is due on 6/10/18. Please help!
推荐答案
家庭作业的想法不是在互联网上找到我可以提交的东西 - 这是为了让你有机会学习通过使用你所教的内容来正确使用材料。
如果你不理解代码，你就没有学到任何东西 - 这就是你复制时会发生什么。通过这样做而不是通过copy'n'paste来学习。这意味着当你参加考试时，你会失败，因为你没有任何地方可以复制。
O. h，顺便说一下：你的导师几乎肯定知道这个网站存在，并且不会乐意为你有效偷走的东西给你一个好的标记（当你宣称它是你的原创作品时，它被称为抄袭，这就是它的处理方式用于标记正在做）。你更有可能因为作弊而被踢出去，这正是你应得的。
所以把那个地方扔进垃圾桶，坐下来自己写下来码。这是诚实地做到这一点的唯一方法。
The idea of homework isn't "find something on the internet that I can hand in" - it's to give you a chance to learn the material properly by using what you are taught.
If you don't understand the code, you haven't learned anything - which is what happens when you copy. You learn by doing, not by copy'n'paste. And that means that when you get to teh exams, you will fail them, because you don't have anywhere to copy from.
Oh, and by the way: your tutor almost certainly knows this site exists, and will not be happy to give you a good mark for something you effectively stole (it's called plagiarism when you claim it as your original work, which is what handing it in for marking is doing). It's more likely that you will be kicked out for cheating, which is exactly what you would deserve.
So throw that lot in the bin, sit down and write your own code. It's the only way to do it honestly.
HTML和javascript都有很多问题，例如：
There are many things wrong with both the HTML and the javascript, for example:
<label for="fourteen"><input type="radio" name="fourteen" value="5" id="fourteen_join" />James Charles</label> for =fourteen应为 for =fourteen_join。
for="fourteen" should be for="fourteen_join".
eighteen = parseInt(document.querySelector('input[name = "eighteen]:checked').value);还有在十八之后缺少报价。
There's a quote missing after "eighteen.
four parseInt(document.querySelector('input[name = "four"]:checked').value); 缺少 = 。
onsubmit 缺少其结束大括号。
有各种未关闭的标签，例如< div id =main> 。
我建议使用语法荧光笔和< a href =https://validator.w3.org/#validate_by_input> HTML验证器 [ ^ ]修复所有语法错误。
The = is missing.
The onsubmit is missing its closing curly brace.
There are various unclosed tags, e.g. <div id="main">.
I would recommend using a syntax highlighter and a HTML validator[^] to fix all the syntax errors.
你确定你的页面是正确的HTML吗？
我不知道看常用标签：< html> < HEAD> < body>
开发遵循一些规则。
Are you sure your page is correct html ?
I don't see usual tags: <html> <head> <body>
Development follow some rules.
引用：
我正在使用http://codeactually.com/interactivequiz.html上的说明。我已经将测验扩展到有二十个问题，而不是四个。
I am using directions from http://codeactually.com/interactivequiz.html. I have extended the quiz to have twenty questions, instead of four.
您从找到的代码开始：确保它在任何更改之前有效。进行必要的参数设置，直到它在您的计算机上运行。
然后，对于您添加的任何功能，您也遵循一些规则：
- 创建测试，创建初始代码，然后开始迭代。
- 测试功能，测试现有功能以确保没有破坏任何东西。
- 如果错误，请使用调试器看看你的代码在做什么。
- 做更正并再次测试。
- 当一项功能有效时，你可以将它集成到你的应用程序并检查是否有任何损坏。
- 模块化：它有助于捕获bug。
- 确保你可以回到以前的工作版本。
You start with code you found: Make sure it works before any change. Make necessary parametering until it work in your computer.
Then for any feature you add, you follow some rules too:
- Create tests, create initial code, then start to iterate.
- Test feature, Test existing features to make sure you didn't break anything.
- If errors, use debugger to see what your code is doing.
- Do corrections and test again.
- When a feature works, you can integrate it to your app and check if anything was broken.
- Be modular: it helps hunting bugs.
- Make sure you can go back to previous working version.
这篇关于如何修复此HTML测验？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
