Question

我正在尝试使用Javascript开发一个简单的在线文字游戏。我已经走了，但我现在卡住了。基本上游戏的第一部分是显示十个单词及其描述。

然后用户可以点击“测试我”按钮，然后转到我称为testme.html的页面，在那里我将显示描述，然后，他们可以选择四个单词。一旦玩家点击下一个描述的按钮，我的描述就可以正常工作了。现在，我需要能够切换多个选项，并创建一个函数，我可以看到他们是否选择了正确或错误的单词，然后最后我可以显示他们有多少对或错例如：你有9/10正确。

以下是主页：http://alexallin.com/wordgame/

以下是testme.html页面：http://alexallin.com/wordgame/Testme.html

var ThisText = 0;

var Words = [ { word: '1. Amicable', definition: 'friendly, agreeable.' }, 
              { word: '2. acumen', definition: 'the ability to make good judgments and quick decisions, typically in a particular domain.' }, 
              { word: '3. accoutrements', definition: 'additional items of dress or equipment, or other items carried or worn by a person or used for a particular activity.' },
              { word: '4. Abstinence', definition: 'the act of refraining from pleasurable activity, e.g., eating or drinking.' },
              { word: '5. Adulation', definition: 'high praise.' },
              { word: '6. Adversity', definition: 'misfortune, an unfavorable turn of events.' },
              { word: '7. Aesthetic', definition: 'pertaining to beauty or the arts.' },
              { word: '8. Anachronistic', definition: 'out-of-date, not attributed to the correct historical period.' },
              { word: '9. Anecdote', definition: 'short, usually funny account of an event.' },
              { word: '10. Antagonist', definition: 'foe, opponent, adversary.' },
];


function ChangeWordTo(NextWord) { 

    document.getElementById('Answer_Box_One').innerHTML = NextWord;

}
 // this grabs the ID description
function ChangeDescriptionTo(NextDescription) {

    document.getElementById('description').innerHTML = NextDescription;

}

// This loads it to the first definition...
function onLoad() {
      switchTo(0);
}

// won't work with out
function switchTo(which) {
     ChangeWordTo(Words[which].word);
     ChangeDescriptionTo(Words[which].definition);
}

// This increments as button is click
function ShowDesc() {
    ThisText++;
    switchTo(ThisText);

}

这是HTML代码------------------------

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="score.js"></script>

</head>
<body onload="onLoad();">

<div id="main">
  <div>
     <center><p id="description">Read the Discription and chose your answer below.</p></center>
  </div>

<br/>

<!--
 <div id="Answer_Box">
 <center>
   <form>
        <input type="checkbox" name="vehicle" value="text" id="Answer_Box_One">I have a bike 

   </form> 
-->

<form>
<center>
<div style="float: left; width: 50%;">
<ul>

  <label id="Answer_Box_One" for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>

  <label id="Answer_Box_Two" for="male">Female</label>
  <input type="radio" name="sex" id="male" value="Female"><br>

  </ul>
</div>

<div style="float: right; width: 50%;">
<ul>

    <label id="Answer_Box_Three" for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>

  <label id="Answer_Box_Four" for="Not Above">Not Above</label>
  <input type="radio" name="sex" id="Not Above" value="Not Above"><br>

</ul>
</div>  
  <button type="button" onclick="ShowDesc();">Correct</button>

</center>
</form>



</center>
</div>



</div>
</body>
</html>

Answer 1

嘿，我只是在帮助，因为我认为你真的陷入困境。但是稍后请注意你的要求，请具体说明。

你的html有点乱，所以我不得不改变它（主要谈论选项部分，因为它是你游戏的主要部分）

现在为你的游戏让我告诉你。

<input type='radio'>的值应与您正在显示的标签相同，因为它可以帮助您检查正确的答案。
你必须动态加载这些选项（在演示中我已经展示了如何为一个人做好休息，请详细说明）
在你再次开始讨论这个问题之前，先阅读一下jquery，javascript和html。

现在我已经使用了jquery，我建议你也可以使用它，因为它会对你有很大的帮助，如果你知道javascript那么jquery对你来说将是一件容易的工作。（相信我这一点）。

This is the demo for your game

在javascript中保持得分

1 个答案: