【发布时间】：2018-04-14 21:18:49
【问题描述】：
我正在制作一张美国地图，当你点击一个州时，你必须回答州首府。我使用 3 列来跟踪答案。一栏是正确答案，第二栏是不正确的，第三栏是未回答的状态。到目前为止，我已经设置好了，当答案正确时，它可以进入第一列，与第二列相同。不幸的是，我不知道如何让所有的州名都从第三个“未回答的列”开始。到目前为止，这是我的代码：
var alts = "";
function loadMap() {
var map = document.getElementById("statemap");
map.addEventListener("click", function(evt) {
var alt = evt.target.alt;
alts = alt;
var id = evt.target.id;
ids = id;
document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
});
}
function shows() {
document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."
}
function show() {
document.getElementById("text").value = "";
document.getElementById('divIdAnswer').innerHTML = "";
}
function checkAnswer() {
if (!alts) {
document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
return;
}
var submittedAnswer = document.getElementById('text').value;
var correctAnswer = alts;
if (submittedAnswer == correctAnswer) {
document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
document.getElementById('divCorrect').innerHTML += ids + "<br>";
} else if (submittedAnswer != correctAnswer) {
document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
document.getElementById('divIncorrect').innerHTML += ids + "<br>"
}
alts = "";
}.column {
float: left;
position: relative;
width: 300px;
height: 200px;
border: 0px;
box-sizing: border-box;
}
body {
padding: 10 px;
text-align: center;
background_color: #GF5D89
font-family: "Trebuchet MS", Helvetica, sans-serif;
} <body onload="loadMap(); shows()">
<h1>Do you know the capitals of each of the United States of America?</h1>
<h2>Use this map to test your knowledge.</h2>
<img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">
<map id="statemap" name="statemap">
<area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
<area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
<area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
<area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
<area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
<area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
<area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
<area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
<area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
<area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
<area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
<area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
<area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
<area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
<area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
<area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
<area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
<area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
<area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
<area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
<area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
<area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
<area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
<area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
</map>
<div id="divIdMessage"></div>
<br>
<textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
<br>
<br>
<input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
<br>
<br>
<div id="divIdAnswer"></div>
<br>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h3>Correct Answers</h3>
<p id="divCorrect"></p>
</div>
<div class="column" style="background-color:#bbb">
<h3>Incorrect Answers</h3>
<p id="divIncorrect"></p>
</div>
<div class="column" style="background-color:#ccc;">
<h3>No Answers</h3>
<p id="divNone"></p>
</div>
<br>
</div>
</body>【问题讨论】：
-
请不要破坏您的问题
标签： javascript html css multiple-columns onload