Author: David O'Gara
This is the unaltered original version of this project, created for the Code Institute Full Stack Software Developer course.
Trivia Survivor is a movie trivia quiz game with an element of danger. Players will test their knowledge of movie trivia as a creature makes its way towards them. Correct answers will stall the creatures approach while incorrect answers will allow it to advance. When too many wrong answers have been submitted the game ends in failure so to survive players must answer enough trivia questions correctly.
This version, created as part of an course project will be subtitled 'Demo of the Dead' and focus its subject matter on the zombie sub-genre of horror movies as this will allow for a scope that fits within the time frame given for development.
- Trivia Survivor
Table of contents generated with markdown-toc
Users of the site are invited to test their knowledge of movie trivia in a fun survival quiz where they must answer questions correctly or lose from a limited number of lives.
The goal in creating the site is to provide and entertaining and fun quiz that encourages repeat attempts. A secondary goal of this site is to demonstrate the use of Javascript in creating an interactive application.
The target audience are in this case a movie watching audience, in particular horror movies. This will then appeal to an audience of film watching age of at around 15+ due to the subject matter and age requirements of the films. For this project the scope will focus on films of the zombie genre which, although specific, is an ever-popular subgenre with a sizable audience. A potential future version of the app would include a selection of genres to choose from.
As a visitor I want to put my knowledge to the test in a quiz and be rewarded for correct answers by ‘surviving’ the game and being a score. I would return to the site to improve my score and try out other modes.
As the site owner I want user to make return visits to the site to both improve their score and try other modes. The possibility of failure from too many wrong answers creates a challenge element and immediacy to the quiz and randomised questions assist replay-ability.
Here is a PDF of the wireframes put together at the site's inception. Adobe photoshop was used to visually plan the sites look and layout using an iPhone Xs (375x812) and a Dell laptop (1920x1080) as reference for viewport size/ratio:
Here is a storyboard for the basic way the creature image advances after each wrong question accompanied by an increasing bar in colours green to red that symbolises the threat level:
Here is the zombie design used:
And here is a pdf file with the zombie-advance images rendered in photoshop:
The theme and title chosen reminded me of the the playstation game series 'Resident Evil' so I looked to the the late nineties era titles for inspiration and chose to base the colour palette on the inventory screen (pictured below) from Resident Evil 2 (1998). This includes using green and red in the same manner to represent states of 'fine' and 'danger'.
Instead of aiming for an exact match however, I found a suitable set of close-matches as part of photoshop's 'Dark' colour palette in the default swatches collection. Here is a generated palette courtesy of the site coolors:
Though not pictured here, the site will use plain white (#ffffff) for the majority of text shown.
- For the majority of the text the font choice will be courier new as this fits thematically with a movie trivia game by resembling typed film-scripts.
- For the Headings; a sans serif font, 'League Gothic' was chosen for a dramatic important look to the title.
The first thing a user will see it the title screen. The information given is the title of the app 'Trivia Survivor', its sub-title 'Demo of the Dead'. Underneath this the user is asked to enter their name in the input provided and press the start-game button to play the game. The background image used is a darkened version of the illustration used as the main game back drop.
Upon entering their name and selecting the start button the user will then be asked to choose a difficulty from easy, normal or hard. Normal mode is set at 10 questions to answer and 5 lives the user has for wrong answers. Easy mode reduces the questions to 5 while keeping the lives the same. Hard mode keeps the quiz length at 10 but reduces the users lives to 3.
Once a difficulty is chosen the game will begin. The game screen is split into 2 halves. One half displays the image of the creature and the coloured bar beside it. The other half either displays the questions and answer buttons or message text and a button to continue after reading. The majority of time spent in the game here, switching between questions and confirmation text stating whether an answer was right or wrong. On desktop or large tablets viewed in landscape the screen division is set at a left and right while with mobiles and small screens in portrait view the game screen is divided in top and bottom.
Fixed to the top of the screen is the navigation bar containing buttons that take the user to different sections of the app. These are not html links, instead the buttons activate functions that show or hide different sections of html information. The buttons are made using font-awesome icons and a label in plain-text is displayed when the buttons are hovered over.
- The home button takes the user to the title screen, starting the app from the beginning where they'll be asked to input their name to start.
- The sound button toggles the sound effects on or off. This is off by default.
- The information button displays the information screen where the rules of the game can be found.
- The Score button displays the score page where the users results are displayed.
- The feedback button displays the feedback page where the user can fill in a feedback form which will be sent as email to the site owner.
The info page gives a brief description of the game and its rules.
The scores page displays the recent score the user has achieved in this session.
The contact form allows the user to leave feedback on their experience with the app. Using the service emailJS I set up Javascript email service so that any feedback entered in the form will be sent to me via email. This would allow for the site to grow from user suggestions. The format is as follows:
- Subject: Trivia Survivor Feedback from {{user_name}}
- Hello David,
- You received a new feedback comment from {{user_name}} on your Trivia-Survivor game:
- {{message}}
- Best wishes,
- EmailJS team
Here's a screenshot from a successful test:
A custom 404 error page was created in the style of the rest of the site with a link back to the trivia survivor page. This page is created in the same format as the main page so as not to seem to jarring when the error occurs.
- A version of the game with greater development time would include a different game setting for different genres of film that utilise a different backdrop and creature design depending on the genre represented.
- Greater production time could also see a more animated version of the game with graphics creating a livelier feel.
I tested the buttons in the navigation bar to check they behave as expected. This includes trying the buttons from various states of gameplay.
- tested navigation buttons from title screen.
- tested navigation buttons from mid-quiz.
- tested navigation buttons from results screen.
- tested navigation buttons with sound on.
- tested navigation buttons with sound off.
- tested continue buttons from all screens during title screen
- tested continue buttons from all screens during quiz
- tested continue buttons from all screens during results
| Mode | Scenario | Video |
|---|---|---|
| Normal | Failing with 0/10 | video |
| Normal | Failing with 5/10 | video |
| Normal | Surviving with 6/10 (minimum score for survival) | video |
| Normal | Surviving with 10/10 | video |
| Easy | Failing with 0/10 | video |
| Easy | Surviving with 1/10 (minimum score for survival) | video |
| Hard | Failing with 0/10 | video |
| Hard | Failing with 7/10 | video |
| Hard | Surviving with 8/10 (minimum score for survival) | video |
| Hard | Surviving with 10/10 | video |
| Description | Screenshot |
|---|---|
| Navigate to the Feedback form: |  |
| Attempt to send form with no input data: |  |
| Attempt to send form with no email data: |  |
| Attempt to send form with email in wrong format: |  |
| Attempt to send form with no text data: |  |
| Form correctly filled in: |  |
| Confirmation message on form success: |  |
| Form cleared and feedback form text changed: |  |
| Received email of form data: |  |
During development Chrome's developer tools were used to test the look of the app accross multiple screen sizes by inspecting the page and then viewing the site using the presets available. This emulated using the app accross different devices. This list includes the laptop I use to develop the app as well.
| Device | Dimensions |
|---|---|
| iPhone SE | 375x667 |
| iPhone XR | 414x896 |
| iPhone 12 Pro | 390x844 |
| Pixel 5 | 393x851 |
| Samsung Galaxy S8+ | 360x740 |
| Samsung Galaxy S20 Ultra | 412x915 |
| iPad Air | 820x1180 |
| iPad Mini | 768x1024 |
| Surface Pro 7 | 912x1368 |
| Surface Duo | 540x720 |
| Galaxy Fold | 280x653 |
| Samsung Galaxy A51/71 | 412x914 |
| Nest Hub | 1024x600 |
| Nest Hub Max | 1280x800 |
| Windows laptop | 1920x1080 |
Using the site Browserstack, I tested the app across multiple devices, browser and operating systems for a wide view of functionality across platforms.
| Device | OS | Viewport | Browser | Browserstack Screenshot |
|---|---|---|---|---|
| Samsung Galaxy S23 | Android | 393x786 | Chrome | Screenshot-01 |
| Xiaomi Redmi Note 12 | Android | 393x873 | Chrome | Screenshot-02 |
| iPhone 14 | IOS | 390x664 | Safari | Screenshot-03 |
| iPhone 13 | IOS | 390x664 | Safari | Screenshot-04 |
| iPad 10th | IOS | 393x786 | Safari | Screenshot-05 |
| PC | Windows 11 | 120x927 | Edge | Screenshot-06 |
| Mac | Ventura | 120x927 | Safari | Screenshot-07 |
| Google Pixel 6 Pro | Android | 412x778 | Chrome | Screenshot-08 |
| laptop PC | Windows 10 | 1920x1080 | Firefox & Chrome | Screenshots used throughout |
Using the website Statcounter, I looked at the most popular browser, device vendor and operating system for the last year. This told me which combinations to focus on when testing using browserstack.
| Description | Graph |
|---|---|
| Browser: |  |
| Device Vendor: |  |
| Operating System: |  |
Copy and pasted the javascript files into jshint, a web service that checks Java script code for errors and recieved no errors and 1 warning.
| Screenshot | Description |
|---|---|
 |
JShint displays one comment when checking the main script.js. This is that there is an undefined variable of questionsList. This is because JShint cannot, from the code pasted see that this variable comes from its own js file 'questions.js'. So this comment is ignored. |
 |
JShint displays one comment when checking questions.js. This is that there is an unused variable of questionsList. This is because JShint cannot, from the code pasted see that the variable is used within the main script.js file. So this comment too is ignored. |
 |
JShint displays one warning when checking the email.js file. This is that there is an unexpected character on line 23. As this is code copied from the emailJS tutorial and not written by me I decided to ignore this to avoid any errors in the email service function. The comments about undefined variable too are due to the code refrencing an external source and is therfore ignored. |
Chrome developer tools 'lighthouse' function was used to assess the apps accessibily, search engine optimisation and performance.
During development many bugs occurred, some more difficult to address than others. These include:
-
Users were able to get to the end of the game an win with 0/5 on the easy difficulty as the game was counting 5 questions completed as a win regardless of the 0 lives left. This was fixed quite simply with an if statement that check the users lives count before making a win/lose decision.
-
A big problem for me was a bug in the way my code was set up that seemed to increment the question number exponentially and caused the game to be over before even playing ten questions. I couldn't figure out the cause of this problem using console logs and developer debug breakpoints. I believe however, that this was fixed by tidying up the use of eventlisteners for various buttons in use throughout as well as through a thorough organising and notation of the code, making sure the step wise motion of functions made logical sense.
-
Another particularly difficult bug was one in which the email service appeared to break when it came time to test for the readme. Instead of a pause followed by a confirmation alert and an email received as expected the page appeared to refresh and return to the title screen without even giving the failure to send alert that was in place at the time. I couldn't find the reason this wasn't working with either console logs or dev tools breakpoints as it seemed to through the whole process out. The only solution that seemed available was to remake the contact form from tutorial and this appeared to solve the issue.
No known bugs remain unfixed.
The website is deployed on Github using GithubPages. The instructions for this are as follows:
| Instruction | Screenshot |
|---|---|
| Go to the Repository: |  |
| Navigate to the settings tab: |  |
| Navigate to 'Pages' on the left menu bar under 'Code and Automation': |  |
| Under 'Branch' select 'main' from the list: |  |
| Hit Save: |  |
| Once saved you'll receive confirmation. The deployment may take a few moments to complete: |  |
| Once complete you'll find a link to your site at the top of the page: |  |
For this project the IDE I predominantly used was Adobe Dreamweaver. Although not a popular IDE, it was something I already had access to as part of Adobe's Creative Cloud package and found easy to start using with my lack of experience in software development. This also allowed me to get started on projects relatively quickly compared to Codeanywere's load times. Combined with git for windows this allowed me to use the git command line terminal to add, commit, pull and push with the repository. Dreamweaver has limitations however, so for any markup documents such as the readme or site manifest for favicons editing directly in github was necessary.
- The Icons in the Nav bar were sourced from the Font Awesome website.
- Multi Device Image in README generated with 'Am I Responsive?'
- Table of contents in README generated with markdown-toc
- Colour palate image in README generated with coolors.co
- Favicon icons and code courtesy of favicon.io
- Sounds from https://freesound.org/
Email service courtesy of emailJS
Here is the code in action:
- This is the code given in the emailJS setup tutorial: [(link here)](https://www.emailjs.com/docs/tutorial/creating-contact-form/)<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
// https://dashboard.emailjs.com/admin/account
emailjs.init('YOUR_PUBLIC_KEY');
})();
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
// generate a five digit number for the contact_number variable
this.contact_number.value = Math.random() * 100000 | 0;
// these IDs from the previous steps
emailjs.sendForm('contact_service', 'contact_form', this)
.then(function() {
console.log('SUCCESS!');
}, function(error) {
console.log('FAILED...', error);
});
});
}
</script>
</head>
<body>
<form id="contact-form">
<input type="hidden" name="contact_number">
<label>Name</label>
<input type="text" name="user_name">
<label>Email</label>
<input type="email" name="user_email">
<label>Message</label>
<textarea name="message"></textarea>
<input type="submit" value="Send">
</form>
</body>
</html>
- And here is how I utilised it on my page:
(function () {
// https://dashboard.emailjs.com/admin/account
emailjs.init("3Q0SMJLBwZIF-Uvwg");
})();
window.onload = function () {
document
.getElementById("contact-form")
.addEventListener("submit", function (event) {
event.preventDefault();
// generate a five digit number for the contact_number variable
this.contact_number.value = (Math.random() * 100000) | 0;
// these IDs from the previous steps
emailjs.sendForm("service_pmzmnla", "contact-form", this).then(
function () {
document.getElementById("contact-form").reset();
modal_message.innerHTML = 'Thank you for your feedback.';
modal.style.display = "flex";
document.getElementById('feedback-text').innerHTML="Thank you, your feedback has been recieved and will be taken into consideration.";
document.getElementById('contact-form').display="none";
},
function (error) {
modal_message.innerHTML = 'Sorry, message failed to send.';
modal.style.display = "flex";
document.getElementById('feedback-text').innerHTML="Sorry, as your feedback failed to send please consider trying again.";
}
);
});
};
<form id="contact-form">
<input type="hidden" name="contact_number">
<label>Name:</label><br>
<input type="text" name="user_name" required><br>
<label>Email:</label><br>
<input type="email" name="user_email" required><br>
<label>Message:</label><br>
<textarea name="message" required></textarea><br>
<input type="submit" value="Send" id="send"><br><br>
</form>
Alerts were proving to be too jarring in style difference in such a way that a user would probably ignore them. Using this modal tutorial from W3Schools I instead created modal messages that could provide information while not taking the user out of the app.
Examples:
Here's were I used the concept in html: <!-- Modal html from https://www.w3schools.com/howto/howto_css_modals.asp -->
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p id="modal_message">What a horrible night to have a curse...</p>
<button id="continue-btn-modal">Continue</button>
</div>
</div>
In Main javascript file:
modal_message.innerHTML = 'This game is best viewed in portrait while at this screen-size.\nPlease rotate or unfold your device.';
modal.style.display = "flex";
In email javascript file:
modal_message.innerHTML = 'Thank you for your feedback.';
modal.style.display = "flex";
- HTML
- CSS
- Javascript
All images/illustration used are the author's own work.
Much of the learning and code framwork is inspired by the html and css essentials and Love-Maths modules in the Code Institute Software Development Course.
Malia Havlicek
David C. O'Gara 2023