【发布时间】：2017-10-09 07:21:18
【问题描述】：
您好，我创建了一个测验网站，但无法让它显示我得到正确的答案以及与足够正确答案相关联的图像。
这是我的代码笔：https://codepen.io/tovasfo/pen/veJdxd
<head>
<title>This quiz</title>
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<h1>Short canadian quiz</h1>
<h2>If you cheat it will take longer</h2>
<form id="quiz" name="quiz">
<p class="questions">What is our national animal?</p>
<input type="radio" id="mc" name="q1" value="Bed">Bed<br>
<input type="radio" id="mc" name="q1" value="Beaver">Beaver<br>
<input type="radio" id="mc" name="q1" value="Bed">It's not this<br>
<!-- // the answer is Beaver -->
<p class="questions">What is our national sport?</p>
<input type="radio" id="mc" name="q2" value="Hockey">Hockey<br>
<input type="radio" id="mc" name="q2" value="Tag">Tag<br>
<input type="radio" id="mc" name="q2" value="Poutine">Poutine<br>
<!-- // Hockey -->
<p class="questions">How many points are on the maple leaf on the flag?</p>
<input type="radio" id="mc" name="q3" value="75">75<br>
<input type="radio" id="mc" name="q3" value="9">9<br>
<input type="radio" id="mc" name="q3" value="11">11<br>
<!-- // 11 -->
<p class="questions">What alcholic beverage do we consume the most?</p>
<input type="radio" id="mc" name="q4" value="Wine">Wine<br>
<input type="radio" id="mc" name="q4" value="Beer">Beer<br>
<input type="radio" id="mc" name="q4" value="Red Bull">Red Bull<br>
<!-- // Beer -->
<p class="questions">What is the capital of canada?</p>
<input type="radio" id="mc" name="q5" value="Toronto">Toronto<br>
<input type="radio" id="mc" name="q5" value="Ottawa">Ottawa<br>
<input type="radio" id="mc" name="q5" value="Your Wrong City">Your Wrong City<br>
<!-- // Ottawa -->
<p class="questions">What was invented by a canadian?</p>
<input type="radio" id="mc" name="q6" value="French Fries Baby">French Fries Baby<br>
<input type="radio" id="mc" name="q6" value="Basketball Baby">Basketball Baby<br>
<input type="radio" id="mc" name="q6" value="I'm Sorry">I'm Sorry<br>
<!-- // Basketball baby -->
<p><input id="button" type="button" value="submit" onclick="check();"></p>
</form>
<div id="done">
<p id="correct"></p>
<p id="message"></p>
</div>
</body>
</html>
CSS
body {
font-family: sans-serif, arial;
}
#done {
visibility: hidden;
}
JavaScript
function check() {
var q1 = document.quiz.q1.value;
var q2 = document.quiz.q2.value;
var q3 = document.quiz.q3.value;
var q4 = document.quiz.q4.value;
var q5 = document.quiz.q5.value;
var q6 = document.quiz.q6.value;
var correct = 0;
if (q1 == "Beaver") {
correct++;
}
if (q2 == "Hockey") {
correct++;
}
if (q3 == "11") {
correct++;
}
if (q4 == "Beer") {
correct++;
}
if (q5 == "Ottawa") {
correct++;
}
if (q6 == "Basketball baby") {
correct++;
}
var messages = [
"YOU ARE UNSTOPPABLE!!!",
"Excellent work",
"You got most",
"It's alright",
"It's not good ahhhhh",
"Don't try and act dumb",
"Your so drunk"
];
var pictures = [
"img/socol.gif",
"img/tenor.gif",
"img/mity.gif",
"img/okay.gif",
"img/ohno.gif",
"img/dumb.gif",
"img/drunky.gif"
];
var range;
if (correct > 5) {
range = 0;
}
if (correct > 4 && correct < 6) {
range = 1;
}
if (correct > 3 && correct < 5) {
range = 2;
}
if (correct > 2 && correct < 4) {
range = 3;
}
if (correct > 1 && correct < 3) {
range = 4;
}
if (correct > 0 && correct < 2) {
range = 5;
}
if (correct < 1) {
range = 6;
}
document.getElementById("done").style.visiblity = "visible";
document.getElementById("correct").innerHTML =
"you got " + correct + " correct.";
document.getElementById("message").innerHTML = messages[range];
document.getElementById("picture").src = pictures[range];
}
这就是我现在所拥有的。我只是希望通过向用户提供他或她答对了多少个答案以及正确的图像来实际运行测验。
【问题讨论】：
-
你有一个错字：
visiblity而不是visibility -
标签： javascript html css