survive-web-MS2/index.html at master · JoelMichaelRutter/survive-web-MS2 · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survive</title>
    <meta name="description"
        content="Welcome to Survive.web, the 'what would you do?' quiz game where you can test your zombie apocalypse decision making skills. Will you survive?">
    <meta name="keywords" content="zombie, apocalypse, zombies, quiz, decision, survival">
    <meta name="author" content="Joel Michael Rutter">
    <link rel="stylesheet" href="assets/styles/styles.css" type="text/css">
    <script src="https://kit.fontawesome.com/96b5b0d61e.js" crossorigin="anonymous"></script>
</head>

<body>
    <!--Below is the main header which contains the h1 element displaying the quiz's title-->
    <header>
        <h1 id="main-header"><a href="index.html" id="header-link" aria-label="Click here to return to the start of the game">Survive</a></h1>
    </header>
    <!--Below is the music button flex container which contains the two buttons that the user can use to play or mute the background music-->
    <div id="music-btn-container">
        <button id="play-music-btn" aria-label="Click this button to play the background music"><i
                class="fas fa-play"></i><i class="fas fa-music"></i></button>
        <button id="mute-music-btn" aria-label="Click this button to mute the background music"><i
                class="fas fa-volume-mute"></i><i class="fas fa-music"></i></button>
    </div>
    <!--
        Directly below is the rules container which is displayed when the page loads, it contains an introductory paragraph and the rules/premise of the quiz.
        It is removed from the DOM via CSS display when the user clicks the start game function
    -->
    <div id="rules-container">
        <p>Welcome to Survive, the decision making quiz where you can test your mettle during the inevitable
            zombie
            apocalypse. Before you play, let's get you acquainted with the rules and game instructions:</p>
        <br>
        <ul class="rules-list">
            <li>You will be presented with 10 zombie apocalypse scenarios and questions.</li>
            <li>For each scenario and question, you will have four options to choose from.</li>
            <li>The options have a score value ranging from 10 to 40. When you select an option, your total score
                will
                increase.</li>
            <li>Every time you select an option, the next scenario will be displayed.</li>
            <li>At the end of the game, your score will be assessed and depending on the score you acheive, we will
                decide how likely you are to survive.</li>
            <li>When you start the game, some background music will play. You can use the buttons above to mute and
                play the music as you please.</li>
            <li>If you reload the page for any reason, you will be returned to this screen and you will have to
                begin
                again.</li>
        </ul>
        <!--Below is the start game button, this is the what the script.js file is listening for to run the start game function and what starts the bg audio playing-->
        <button id="start-game"><i class="fas fa-biohazard"></i> Play</button>
    </div>
    <!--
        Directly below is the game container, this is the HTML element that contains the user score, the question number,
        the situation and finally the question in seperate spans. There is some placeholder text in place to help you identify
        it but when the game runs, the text content is populated from the questions.js file.
    -->
    <div id="game-container">
        <div id="score-block">
            <h2>Score:<span id="score-tally-container">0</span></h2>
        </div>
        <div>
            <span class="game-content" id="number-container" >This is where the number will go</span>
            <span class="game-content" id="situation-container">This is where the situation will go</span>
            <span class="game-content" id="question-container">This is where the question will go</span>
        </div>
    </div>
    <!--
        Directly beneath this comment is the answer button flex container. This contains the four answer buttons.
        Inside the buttons is a span which is also populated from the questions.js file.
    -->
    <div id="answer-btn-container">
        <button class="answer-btn" id="answer-one"><span class="answer-container"></span></button>
        <button class="answer-btn" id="answer-two"><span class="answer-container"></span></button>
        <button class="answer-btn" id="answer-three"><span class="answer-container"></span></button>
        <button class="answer-btn" id="answer-four"><span class="answer-container"></span></button>
    </div>
    <!--Beneath this comment are the score divs, these are displayed to the document depending on the value of the scoreTally value
    Which is assessed in the assessScore function in script.js. The game area and answer buttons are removed when the assessScore function runs
    by changing the display properties. These divs are then displayed based on the value of scoreTally

    It is worth noting that should additional questions be added, the score brackets or scoring system may need to change or have additional
    brackets introduced.
    -->
    <div class="score-div" id="best-score">
        <h2>You're a real Rick Grimes wannabe aren't you</h2>
        <p>You scored between 300 & 400 points!</p>
        <div class="score-img-flex-container">
            <img src="assets/images/best-score-image.png" alt="An image of Rick Grimes face" class="score-div-image">
        </div>
        <p>Based on your answers, you are a survivor. You are stone cold, ruthless and cautious. We know who we are
            tagging along with during the apocalypse.</p>
        <p>Whilst we now know that you're a survivor, if you think you can do better, why don't you play again?</p>
        <button class="play-again-btn"><i class="fas fa-undo-alt"></i> Play Again</button>
    </div>
    <div class="score-div" id="good-score">
        <h2>You've got red on you.</h2>
        <p>You scored between 200 & 300 points!</p>
        <div class="score-img-flex-container">
            <img src="assets/images/good-score-image.png" alt="An image of Shaun from Shaun of the Dead"
                class="score-div-image">
        </div>
        <p>Based on your answers, we think that you are more than likely to survive. Your decision making could
            improve though.</p>
        <p>Whilst we think you can probably survive, you might want to have another go to see if you can beat your score.</p>
        <button class="play-again-btn"><i class="fas fa-undo-alt"></i> Play Again</button>
    </div>
    <div class="score-div" id="bad-score">
        <h2>Oh dear, oh dear, oh dear</h2>
        <p>You scored between 100 & 200 points.</p>
        <div class="score-img-flex-container">
            <img src="assets/images/bad-score-image.png"
                alt="An image of David, a disliked character from Shaun of the Dead" class="score-div-image">
        </div>
        <p>We hate to break it to you but you don't really seem cut out for the end of the world. Your decision
            making is really lacking. You might want to brush up on that and read some zombie apocalypse survival
            guides.</p>
        <p>Once you have brushed up on your zombie survival knowledge, why don't you have another go?</p>
        <button class="play-again-btn"><i class="fas fa-undo-alt"></i> Play Again</button>
    </div>
    <div class="score-div" id="worst-score">
        <h2>Braiiinnnssss</h2>
        <p>You scored 100 points.</p>
        <div class="score-img-flex-container">
            <img src="assets/images/worst-score-image.png" alt="A close up image of a zombies face"
                class="score-div-image">
        </div>
        <p>Let's be honest now, you might aswell just lie down and accept your fate. Based on your answers, we're
            sure that you are as good as zombified when the time comes.</p>
        <p>Fear not, it isn't the end of the world just yet. Go and brush up on your zombie survival skills and come
            and have another go.</p>
        <button class="play-again-btn"><i class="fas fa-undo-alt"></i> Play Again</button>
    </div>

    <script type="module" src="assets/javascript/questions.js"></script>
    <script type="module" src="assets/javascript/script.js"></script>
</body>

</html>