-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (146 loc) · 7.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logeee</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
</head>
<body>
<div class="app">
<div class="screen">
<header>
<div class="navbar">
<a id="navbar_intro" onclick="Slidebar(1), nextPage(1)" href="#">Introduction</a>
<a id="navbar_defi" onclick="Slidebar(2), nextPage(2)" href="#">Definition</a>
<a id="navbar_howto" onclick="Slidebar(3), nextPage(3)" href="#">How To Play</a>
</div>
<div class="slider">
<span id="navbar_bar"></span>
<span id="navbar_barback"></span>
</div>
</header>
<!-- Page 1 Homepage -->
<div class="page" id="page1">
<h1 class="pageTitle">Logee</h1>
<p class="introText">A short game that teaches the fundementals of deductive and inductive reasoning</p>
<img class="mascotImage" src="imgs/HOME.svg" />
<p class="introText">In this game, you will first be taught what deductive and inductive reasoning is, before applying that knowledge to a series of multiple choice questions</p>
<button class="buttonBlue btn transition" onclick="nextPage(1)">Lets Learn!</button>
</div>
<!-- Page 2 Intro -->
<div class="page" id="page2">
<h2 id="reasoningHeader">Introduction</h2>
<img class="mascotImage" src="imgs/definition2.svg"/>
<h2>Why is Reasoning Important?</h2>
<p class="textBody">Sometimes, we might have to make hard decisions. Reasoning is putting ideas in your head into good arguments for why one decision is better over another. So knowing how to reason properly is important for everyday life!
For example, if you want ice cream over cookies, and you have to ask your parents. This is a great place to use good reasoning to make them change their mind!</p>
<button class="buttonBlue btn transition" id="page2Button" onclick="nextPage(2)">Next Page</button>
</div>
<!-- page 3 Deductive Reasoning -->
<div class="page" id="page3">
<h2 id="tabHeader">Deductive Reasoning</h2>
<img class="mascotImage" id="definitionTab" src="imgs/hippo.svg" />
<h2 id="reasoningSubHeading">Facts Over Opinions</h2>
<p class="textBody" id="reasoningBody"> Deductive reasoning is when a person makes an arguement or decsion by using true
facts. <br/> <br/> Deductive reasoning is harder to disprove, as it uses indisputable facts, however, it is a more difficult reasoning to use in everyday life, as it requires you to know all the relevent details of the siutation to successfully argue your point. </p>
<div id="tab">
<p id="deductTab" class="tabReasoning" onclick="deductiveTab()">Deductive</p>
<p id="inductTab" class="tabReasoning" onclick="inductiveTab()">Inductive</p>
</div>
<button class="btn buttonGray transition" id="nextPageGray">Next Page</button>
<button class="buttonBlue btn transition" id="nextPageBlue" onclick="nextPage(3)">Next Page</button>
</div>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Baloo|Nunito:400,600,900&display=swap" rel="stylesheet" />
</head>
<!-- page 4 How to Play -->
<div class="page" id="page4">
<div class="howToPlayContainer" >
<h2 id="howtoPlayTopText" >How to Play!</h2>
<div class="howToPlayTextBox" >
<p>
You will be presented with an argument, and <b>4 potential responses</b> to that arguement.
</p>
</div>
<img src="imgs/arrow.svg" alt="" class="arrowImage">
<div class="howToPlayTextBox">
<p>
Pick the response that best represents either <b>deductive or inductrive reasoning,</b> depending on what
the
question asks.
</p>
</div>
<img src="imgs/arrow.svg" alt="" class="arrowImage">
<div class="howToPlayTextBox">
<p>
Once you have picked your choice, <b>hit the “Confirm” button.</b> If you are wrong 5 times, its a Game
Over!
</p>
</div>
<button class="btn buttonRed transition practiceButton" onclick="nextPage(4), startGame(), practicePopup()">Start Practice</button>
</div>
</div>
<!-- Page 5 Game Screen -->
<div class="nextQuestionPage2">
<h1 class="result3"></h1>
<p class="resultsDescription3"></p>
<button class="nextQuestionBtn2 btn buttonRed" onclick="practicePopupNone()">Let's Practice!</button>
</div>
<div class="nextQuestionPage">
<h1 class="result"></h1>
<p class="resultsDescription"></p>
<button class="nextQuestionBtn btn buttonRed" onclick="initQuestion(), clearAnswer();">Next Question</button>
</div>
<div class="incorrectPage">
<p class="resultsDescription2"></p>
<h1 class="result2"></h1>
<button class="tryAgainButton btn buttonRed" onclick="tryAgain(), clearAnswer()">Try Again!</button>
</div>
<div class="page" id="page5">
<header class="statusHeader">
<div class="quitBtn transition " onclick="nextPage(3), clearAnswer(), changeHowToPlayButtonText() ">X</div>
<div class="progressBar">
<div class="blueBar transition"></div>
<div class="backBar transition"></div>
<p class="questionCount"></p>
</div>
<div class="health">
<img src="imgs/heart.svg" alt="heart" class="heartImage">
<p class="healthStatus">5</p>
</div>
</header>
<p class="questionText">Select the answer that best represents</p>
<p class="reasoning"></p>
<p class="questionText">and then confirm your answer.</p>
<img class="mascotImage questionImage" src=http://placekitten.com/200/300 />
<b class="statement"></b>
<p class="yesOrNo"></p>
<button class="questionsBtn transition" id="question1" onclick="questionAnswer1()"></button>
<button class="questionsBtn transition" id="question2" onclick="questionAnswer2()"></button>
<button class="questionsBtn transition" id="question3" onclick="questionAnswer3()"></button>
<button class="questionsBtn transition" id="question4" onclick="questionAnswer4()"></button>
<button class="btn confirm buttonGray transition" onclick="confirm()">Confirm</button>
<script src="app.js"></script>
</div>
<div id="gameOver" class="page" >
<h1 class="gameOverText">OOPS</h1>
<p>You can do this next time, champ!</p>
<img class="mascotImage" src="imgs/gameover.svg" />
<button class="btn buttonBlue marginAuto" onclick="nextPage(4), restartGame(2), clearAnswer()">Try again</button>
<button class="btn buttonBlue marginAuto" onclick="nextPage(2), restartGame()">Main menu</button>
</div>
<div id="congratulations" class="page" >
<h1 class="congratulationText">Congrats!</h1>
<p>You are the reasoning <b>MASTER!</b></p>
<img class="mascotImage" src="imgs/congrat.svg" />
<button class="btn buttonBlue marginAuto" onclick="nextPage(4), restartGame(2), clearAnswer(), changeHowToPlayButtonText()">Try again</button>
<button class="btn buttonBlue marginAuto" onclick="nextPage(2), restartGame(), changeHowToPlayButtonText()">Main menu</button>
</div>
</div>
</div>
<!-- End Game Screen -->
<script src="app.js" ></script>
</body>
</html>