如何在列中放置多个元素

时间：2018-04-14 21:18:49

标签： javascript html css multiple-columns onload

我正在制作一张美国地图，当你点击一个州时，你必须回答州首府。我使用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>

3 个答案:

答案 0 :(得分：1)

您可以使用for循环遍历＃statesmap的孩子：

var unansColumn = document.getElementById("divNone");
var states = document.getElementById("statemap").children;
var stateName;
var tmpStateDiv;
for (var i = 0; i < states.length; i++) {
    state = states[i];
    stateName = state.getAttribute('id');
    tmpStateDiv = document.createElement('DIV');
    tmpStateDiv.setAttribute('id', 'unanswered' + stateName);
    tmpStateDiv.appendChild(document.createTextNode(stateName));
    unansColumn.appendChild(tmpStateDiv); 
}

这种方法的一个优点是它不仅适用于美国;如果您将地图更改为加拿大地图，并更新了您的#statesmap div以列出加拿大国家，那么它应该可以正常工作而无需修改。

＆＃13;
＆＃13; 
var alts = "";

function resetColumns() {
  var state;
  var stateName;
  var tmpStateDiv;
  var states = document.getElementById('statemap').children;
  var corColumn = document.getElementById('divCorrect');
  var incorColumn = document.getElementById('divIncorrect');
  var unansColumn = document.getElementById('divNone');
  corColumn.innerHTML = '';
  incorColumn.innerHTML = '';
  for (var i = 0; i < states.length; i++) {
    state = states[i];
    stateName = state.getAttribute('id');
    //unansColumn.innerHTML += "<div id= \"" + state.getAttribute('id') + "\">" + state.getAttribute('id') + "</div>"; <-- bad code, bad bjonnfesk
    /*----------------------*/
    //instead, do: 
    tmpStateDiv = document.createElement('DIV'); //create a new element of type div, into which we will put the name of the state we are processing...
    tmpStateDiv.setAttribute('id', 'unanswered' + stateName); //set its id to 'unanswered' + name of the state, for instance 'unansweredOregon' (to avoid an id conflict). It needs to have an id so that we can remove it later, when the state is answered.
    tmpStateDiv.appendChild(document.createTextNode(stateName)); //write the name of the state to the element
    unansColumn.appendChild(tmpStateDiv); //finally, add the entire div element to the list of unanswered states
  }
}

function removeFromUnanswered(id) {
  var unansweredStates = document.getElementById('divNone');
  //unansweredStates.removeChild(unansweredStates.querySelector('#' + id)); <--here a modification is also necessary:
  unansweredStates.removeChild(unansweredStates.querySelector('#unanswered' + id)); //otherwise, since we changed the ids of the states in the unanswered column, our querySelector would not match the state when it is time for it to be removed.
}

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 = "";
  removeFromUnanswered(ids);
}
＆＃13; 
.column {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  border: 0px;
  box-sizing: border-box;
}

body {
  padding: 10 px;
  text-align: center;
  background-color: #FF5D89;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body onload="setTimeout(function() {
    loadMap();
    shows();   
    resetColumns();
  }, 1000);">
  <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">&nbsp;</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>

</html>
＆＃13;
＆＃13;
＆＃13;

我还冒昧地纠正了代码中的其他问题，其中包括导致背景颜色属性（拼错为background_color）生效。

编辑1 ：我假设您还希望在回答后从未答复的列中删除已回答的状态。将此函数添加到脚本中，例如在loadMap（）上面：​​

function removeFromUnanswered(id) {
  var unansweredStates = document.getElementById("divNone");
  unansweredStates.removeChild(unansweredStates.querySelector("#unanswered" + id));
}

...然后在checkAnswer：

中检查答案后调用该函数 
function checkAnswer() {
  ...
  alts = "";
  removeFromUnanswered(ids);
}

编辑2 ：替换了错误的代码并改进了格式。新代码由注释解释，并且比旧代码更具可读性。

答案 1 :(得分：0)

使用.column的百分比宽度而不是固定的

.column{ width : 33.33%; } 

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: 33.33%;
  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>

答案 2 :(得分：0)

  

首先打印出所有州的名称。通过创造做到这一点   迭代你的DOM的数组。打印该阵列。当用户   提交答案，从阵列中删除该答案然后重新打印   数组。

     

> 
> 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 + "?";
>     }); } var arrayUnansw=[]; function createArray(){
>     var query = document.getElementsByTagName("area");
>     for(var i=0;i<query.length;i++){
>       arrayUnansw.push(query[i].getAttribute("id"));
>     } } function printArray(){   var container = document.getElementById("divNone");   for(var
> i=0;i<arrayUnansw.length;i++){
>     container.innerHTML+=arrayUnansw[i]+"<br>";   } } createArray(); printArray(); 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>"
>     }
>     var index = arrayUnansw.indexOf(ids);
>     console.log(index);
>     if(index!==-1)arrayUnansw.splice(index,1);
>     document.getElementById("divNone").innerHTML="";
>     printArray();
>     alts = "";
> 
> } 
> 
>     <style>
>     .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;
>     }
>     }
>     </style>
> 
> 
> 
>     <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>
> 
>

编辑：搞砸格式化。抱歉!但检查一下，它确实有效。

相关问题
最新问题