Skip to content

DOM #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fabrikate wants to merge 5 commits into
base: master
Choose a base branch
from
Open

DOM #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
39a86b2
html version of game
fabrikate May 15, 2015
641eacd
added meta data tags
fabrikate May 15, 2015
0eda503
added DOM structure and manipulation
fabrikate May 15, 2015
767054e
attempted to manipulate DOM structure for questions. stumped myself a…
fabrikate May 16, 2015
e000565
version saved with original DOM text manipulation.
fabrikate May 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions sevenWesterosHTML.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPEhtml>
<html>
<head> <title>A Game of Ice and Fire</title>
</head>
<body>

<!--What the game is -->
<img src = "http://img2.wikia.nocookie.net/__cb20110314204946/gameofthrones/images/0/0f/HBO_Map_of_Westeros.jpg" alt "Map of Westeros" width="300" height="440" align ="right" title= "A Map of Westeros">
<p><h1>A Game of Ice and Fire</h1></p>

<p><h3>You've seen the show, you may have even read the books. Now test your nerdom in a Game of Ice and Fire!</h3></p>
<p>Inspired by George R. R. Martin's series <em>A Song of Ice and Fire</em>, play The Seven Kingdoms of Westeros!</p>

<!-- Refreshing connection between warden families and their kingdoms -->
<p>Need a refresher on the names of the kingdoms? Here is a hint, each kingdom has a warden. Connect between the family and the kingdom name to win!</p>
<p>If you watch the series you know the families. Below are some hints to refresh your memory</p>

<!-- List of the seven families with links to location of the image-->
<ol><h4>The Seven Warden families.</h4>

<li>The Starks</li>
<a href= "https://lh3.googleusercontent.com/fIr4TsPZ6diKC77l0JJFrwoH4iNNHkF-2fmU3yPmNBv0WvSSHL6eUlvJYIpbLvxQL7wtMRfMxA=s128-h128-e365">
<img src = "https://lh3.googleusercontent.com/fIr4TsPZ6diKC77l0JJFrwoH4iNNHkF-2fmU3yPmNBv0WvSSHL6eUlvJYIpbLvxQL7wtMRfMxA=s128-h128-e365" alt="Stark sigil"></a>

<li>The Arryns</li>
<a href = "http://img4.wikia.nocookie.net/__cb20140402114006/gameofthrones/images/6/62/House-Arryn-heraldry.jpg"><img src = "http://img4.wikia.nocookie.net/__cb20140402114006/gameofthrones/images/6/62/House-Arryn-heraldry.jpg" alt="Arryn sigil" width="128" height="128"></a>

<li>The Tullys</li>
<a href = "http://i48.tinypic.com/20staie.jpg"><img src = "http://i48.tinypic.com/20staie.jpg" alt="Tully sigil"></a>

<li>The Lannisters</li>
<a href="http://img1.wikia.nocookie.net/__cb20140402110342/gameofthrones/images/0/0b/House-Lannister-heraldry.jpg"><img src="http://img1.wikia.nocookie.net/__cb20140402110342/gameofthrones/images/0/0b/House-Lannister-heraldry.jpg" alt="Lannister sigil" width="128" height="128"></a>

<li>The Baratheons</li>
<a href="http://img1.wikia.nocookie.net/__cb20110725114921/gameofthrones/images/1/11/Baratheon.JPG"><img src="http://img1.wikia.nocookie.net/__cb20110725114921/gameofthrones/images/1/11/Baratheon.JPG" alt="Baratheon sigil" width ="128" height "128"></a>

<li>The Tyrells</li>
<a href="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house_tyrell_by_liquidsouldesign-d467jau.jpg"><img src="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house_tyrell_by_liquidsouldesign-d467jau.jpg" alt="Tyrell sigil" width="128" height="128"></a>

<li>The Martells</li>
<a href="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house-martell-poster-485x750.jpg"><img src="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house-martell-poster-485x750.jpg" alt="Martell sigil" width="128" height="128"></a>
</ol>

<p></p>
<p><h3>Did you get them all right? Submit your name on the wall of game!</h3></p>
<form action="">
<p>Wall of Game champ:
<input type="text" name="Name" placeholder="Name" />
</p>
</form>

<table width="200" cellpadding="10" cellspacing="5" border="2">
<thead>
<tr>
<th width="50"><strong>Player Name</strong></td>
<th width="50"><stsrong>Score</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>Kate</td>
<td>7</td>
</tr>
</tbody>
</table>




<p>Map image from <a href = "http://gameofthrones.wikia.com/wiki/Westeros">Game of Thrones Wikia</a></p>
<!--If I need it later, here is the code for naming the characters of each family
<ul>
<li>Ned Stark</li>
<li>Catelyn Stark</li>
<ul>Their Children
<li>Robb Stark</li>
<li>Sansa Stark</li>
<li>Arya Stark</li>
<li>Bran Stark</li>
<li>Rickon Stark</li>
<li><em>John Snow</em></li>
</ul>
</ul></li>
<li>The Arryns
<ul>
<li>Jon Arryn</li>
<li>Lysa Arryn</li>
<ul>Their child
<li>Robert "Robin" Arryn</li>
</ul>
</ul></li>
<li>The Tullys
<ul>
<li>Hoster Tully</li>
<li>Edmure Tully</li>
</ul></li>
<li>The Lannisters</li>
<ul> -->
</body>
</html>
125 changes: 105 additions & 20 deletions sevenWesterosUpdate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,99 @@
<!DOCTYPEhtml>
<html>
<head>
<title>A Game of Ice and Fire</title>
<meta charset="utf-8"> <!-- Character Set -->
<meta http-equiv="x-ua-compatible" content="ie=edge"><!--ie edge isn't needed as much -->
<meta name="description" content="A song of ice and fire">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<!--What the game is -->
<img src="http://img2.wikia.nocookie.net/__cb20110314204946/gameofthrones/images/0/0f/HBO_Map_of_Westeros.jpg" alt="Map of Westeros" title="A Map of Westeros">
<p><h1>A Game of Ice and Fire</h1></p>

<p><h3>You've seen the show, you may have even read the books. Now test your nerdom in a Game of Ice and Fire!</h3></p>
<p>Inspired by George R. R. Martin's series <em>A Song of Ice and Fire</em>, play The Seven Kingdoms of Westeros!</p>

<!-- Refreshing connection between warden families and their kingdoms -->
<p>Need a refresher on the names of the kingdoms? Here is a hint, each kingdom has a warden. Connect between the family and the kingdom name to win!</p>
<p>Don't think about the castle or city they live in, but the name of the land (kingdom)</p>

<!--Put event to have person start to play game here-->
<p><h3>Ready to put your nerdy knowledge to the test?</h3></p>
<ul id="gameStart">
<li id="questionStart"></li>
<form action=""><input type="text"; name="kingdomAnswer"; placeholder="Kingdom name"></form>
<button>Submit</button>
</ul>


<!-- List of the seven families with links to location of the image-->
<ol><h4>The Seven Warden families.</h4>

<li>The Starks</li>
<a href="https://lh3.googleusercontent.com/fIr4TsPZ6diKC77l0JJFrwoH4iNNHkF-2fmU3yPmNBv0WvSSHL6eUlvJYIpbLvxQL7wtMRfMxA=s128-h128-e365">
<img src = "https://lh3.googleusercontent.com/fIr4TsPZ6diKC77l0JJFrwoH4iNNHkF-2fmU3yPmNBv0WvSSHL6eUlvJYIpbLvxQL7wtMRfMxA=s128-h128-e365" alt="Stark sigil" title="Stark Sigil"></a>

<li>The Arryns</li>
<a href ="http://img4.wikia.nocookie.net/__cb20140402114006/gameofthrones/images/6/62/House-Arryn-heraldry.jpg"><img src = "http://img4.wikia.nocookie.net/__cb20140402114006/gameofthrones/images/6/62/House-Arryn-heraldry.jpg" alt="Arryn sigil" title="Arryn Sigil"width="128" height="128"></a>

<li>The Tullys</li>
<a href = "http://i48.tinypic.com/20staie.jpg"><img src = "http://i48.tinypic.com/20staie.jpg" alt="Tully sigil" title="Tully Sigil"></a>

<li>The Lannisters</li>
<a href="http://img1.wikia.nocookie.net/__cb20140402110342/gameofthrones/images/0/0b/House-Lannister-heraldry.jpg"><img src="http://img1.wikia.nocookie.net/__cb20140402110342/gameofthrones/images/0/0b/House-Lannister-heraldry.jpg" alt="Lannister sigil" title="Lannister Sigil"width="128" height="128"></a>

<li>The Baratheons</li>
<a href="http://img1.wikia.nocookie.net/__cb20110725114921/gameofthrones/images/1/11/Baratheon.JPG"><img src="http://img1.wikia.nocookie.net/__cb20110725114921/gameofthrones/images/1/11/Baratheon.JPG" alt="Baratheon sigil" title="Baratheon Sigil"width ="128" height "128"></a>

<li>The Tyrells</li>
<a href="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house_tyrell_by_liquidsouldesign-d467jau.jpg"><img src="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house_tyrell_by_liquidsouldesign-d467jau.jpg" alt="Tyrell sigil" title="Tyrell Sigil" width="128" height="128"></a>

<li>The Martells</li>
<a href="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house-martell-poster-485x750.jpg"><img src="http://www.songoficeandfiregroup.com/wp-content/uploads/2014/04/house-martell-poster-485x750.jpg" alt="Martell sigil" title="Martell Sigil"width="128" height="128"></a>
</ol>

<p></p>
<p><h3>Did you get them all right? Submit your name on the wall of game!</h3></p>
<form action="">
<p>Wall of Game champ:
<input type="text" name="Name" placeholder="Name" />
</p>
</form>

<table width="200" cellpadding="10" cellspacing="5" border="2">
<thead>
<tr>
<th width="50"><strong>Player Name</strong></td>
<th width="50"><stsrong>Score</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>Kate</td>
<td>7</td>
</tr>
</tbody>
</table>
<p>Map image from <a href = "http://gameofthrones.wikia.com/wiki/Westeros">Game of Thrones Wikia</a></p>
</body>
</html>


<script type="text/javascript">
function Kingdom(name, question, correctResponse, wrongResponse) {
window.onload = function(){
var newText = document.createElement('li');
var askQuestion = document.createTextNode("test text");
newText.appendChild(askQuestion);
var position = document.getElementById("questionStart");
position.appendChild(newText)

welcome = confirm("Welcome ASOIF and GOT nerds. Here your Westeros knowledge will be put to the test... Can you name all Seven kingdoms of Westeros?");

if (welcome){
function Kingdom(name, question, correctResponse, wrongResponse) {
this.name = name;
this.question = question;
this.correctResponse = correctResponse;
Expand All @@ -24,9 +118,10 @@
"Which mountain kingdom has the castle Eyrie?",
"The warden of this kingdom has a fish as his sigil",
"This prosperous kingdom houses the family that always pays their debts",
"This kingdom is known for its termultous weather and the Baratheon family",
"This kingdom is known for its tumultuous weather and the Baratheon family",
"This kingdom houses the family whos words are 'Growing strong'",
"This southern kingdom is mostly dessert and snakes."];

var triviaCorrectResponse =
["That's correct! Do you have some Stark heritage?", //North
"Correct, clearly you have made the journey up the mountain to the Eyrie", //Vale
Expand All @@ -35,13 +130,15 @@
"That's right! I see the foundation of your knowledge is as strong as Storm's End", //Stormlands
"Yes! Your knowledge grows strong.", //Reach
"Unbowed, Unbent, Unbroken: Your answer is right"]; //Dorne


var triviaWrongResponse = [
"Winter is coming and you have failed.",
"Wrong, you are thrown out of the moon door.",
"No, You decide to attend a wedding at the Frey's...and well you know what can happen at Frey weddings!",
"No, thats wrong. A Lannister always pays their debts",
"No, thats wrong. Much like the former castles of Storm's End you crumple and fall.",
"That answer is like the thorn on a Tyrell rose. Its so wrong it hurts.",
"That answer is like the thorn on a Tyrell rose. It's so wrong it hurts.",
"Thats wrong. You're bit by a dornish viper."
];
var kingdomArray = [];
Expand All @@ -60,21 +157,9 @@
alert(kingdomArray[i].wrongResponse);
}
}


/*
kingdomArray.push(new Kingdom(triviaAnswer[0], trivia[0]));
kingdomArray.push(new Kingdom(triviaAnswer[1], trivia[1]));
kingdomArray.push(new Kingdom(triviaAnswer[2], trivia[2]));
kingdomArray.push(new Kingdom(triviaAnswer[3], trivia[3]));
kingdomArray.push(new Kingdom(triviaAnswer[4], trivia[4]));
kingdomArray.push(new Kingdom(triviaAnswer[5], trivia[5]));
kingdomArray.push(new Kingdom(triviaAnswer[6], trivia[6]));
*/
}else{
alert("Whimp!!")
}
}
//Will S. helped with building constructor functions!
</script>