I am trying to develop a simple online word game using Javascript. I'm have way through, but I'm stuck at the moment. Basically the first part of the game is to display ten words and it's description.
Then users can click the "test me" button and will be directed to a page I called testme.html where I will show a description, and then, four words they could choose from. I have the description working fine once a player clicks the button the next description appears. Now, I need to be able to switch around the multiple choices as well, and also create a function where I could see if they picked the right or wrong word and then at the end I could display how many they got right or wrong for example: you got 9/10 right.
Here is the main page: http://alexallin.com/wordgame/
Here is the testme.html page: 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);
}
Here is the HTML code------------------------
<!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>
