1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 1

Table of ContentsPHASE 1 Problem Definition............................................................................................................................................3

Aim..............................................................................................................................................................................3

Problem Description....................................................................................................................................................3

Assumptions................................................................................................................................................................3

Limitations...................................................................................................................................................................3

Proposed Users...........................................................................................................................................................4

Expected Results.........................................................................................................................................................4

PHASE 2 Design...............................................................................................................................................................4

Phase 2a Specification.................................................................................................................................................4

Choices available to the user:..................................................................................................................................4

IPO Chart:................................................................................................................................................................5

Methods to Improve the Overall User-Interface/User-Friendliness, Application Aesthetics, Presentation and User-Proofing of the Application:............................................................................................................................6

Screen Designs:.......................................................................................................................................................6

Phase 2b Top-Down Design Diagram..........................................................................................................................8

Phase 2c Algorithm Design..........................................................................................................................................9

PHASE 3 Implementation..............................................................................................................................................14

Phase 3a Implementation.........................................................................................................................................14

Phase 3b Documentation of Implementation (Complete User Manual)...................................................................14

PHASE 4 Testing............................................................................................................................................................20

PHASE 5 Evaluation.......................................................................................................................................................22

Application Evaluation...............................................................................................................................................22

Process Evaluation.....................................................................................................................................................23

Possible Improvements.............................................................................................................................................23

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 2

PHASE 1 Problem Definition

AimThe aim of this major project is to create and design a single page application (SPA) that will entertain and ultimately provide an educational resource for both teachers and students alike. This application will be designed to run via a compatible web browser. This product will be a geography and trivia game named “Around the World: An Earthly Trivia”, that makes use of image files and user progress throughout the application to enhance the learning experience of the intended subject matter. Throughout the development of this software application it is imperative to ensure that a wide variety of programming constructs and concepts are utilised. The targeted users for this application are aimed at high school and post-high school level.

Problem DescriptionThe task to be completed is to design and develop a fully-functional single web page application that utilises a wide variety of JavaScript and HTML (Hyper-Text Markup Language) programming constructs that are derived from W3C (World Wide Web Consortium) languages. CSS (Cascading Style Sheet) will be used to help create an aesthetically pleasing web page; however the focus will be on the functionality of the JavaScript (JS). Through the entire application creation process the ‘Software Development Cycle’ (SDC) will be inherent within each phase. ‘Prospekt Studios’ aims to set the precedent with single page application design by ensuring a top-quality product that not only entertains its users but also educates by providing endless hours of new and innovative ways to learn about our world and its geography.

AssumptionsIn general, designing software applications can quickly became a complex task. Because of this it is crucial to eliminate certain environment and situational variables that will ultimately decrease task redundancy and maximise development process efficiency and cohesiveness. The assumptions are as follows:

This single page application will be developed and optimised for Mozilla Firefox – version 6.0.2 It is assumed that the users are at least able to use the human-interface devices such as the keyboard and

mouse to interact with the computer system No other language libraries will be included with this application. Therefore, this application will be made

completely in English (US). It is assumed that users will not cheat by exiting the quiz when they get an answer wrong, and restarting it.

Therefore, users will be assumed to be following the rules and instructions of the game.

LimitationsDue to time and resource constraints, there may be several limitations that the selected application may be subject to. These are listed below:

The application may not be able to contain extensive content libraries for the generation of quizzes within the game.

Due to the constraints of JavaScript such that databases for storing a potential possibility for user profiles and progress cannot be fully implemented into the final application.

The focus of this major project is on the application’s functionality, as implemented through JavaScript, and not so much on the application’s aesthetics. Consequently, Prospekt Studios will not direct its primary focus and resources on designing a highly elaborate as well as artistic user interface and visuals.

o On this note, the application will need to be formed in a way to emulate the aims of functionality with as little redundancy of content as possible – such as large arrays holding very similar data but only that the data is separated by continent selection.

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 3

Proposed UsersOverall, this application will be proposed for a wide variety of users. However, there are nonetheless certain groups of users that may benefit the most from using and playing this single page application, Around the World. These specific groups are given below:

Students: Teachers/Education Facilities: Young and old users aiming at Fun/Leisure:

Expected ResultsVarious results are expected to be achieved by the end of the development phase of this application, however, there are several features and results that a most overtly identifiable as expectations, which are as follows:

Creation of a fully functional Single Page Application with little to no foreseeable or present bugs. Prospekt Studios will have hoped to have demonstrated proficient use and implementation of the various

programming constructs – particularly within the JavaScript domain. After completion of some or all aspects of the game, it is hoped the user will come away with a newfound

knowledge on geography and a positive and creatively refreshing experience with trivia games .

PHASE 2 Design

Phase 2a SpecificationBelow is an overview of the choices that the user may make throughout the SPA which is categorised into the different game states:

Choices available to the user: Main Menu:s

o New Game: takes user to “select continent” game stateo How to Play: opens JS alert box that gives game instructions

Select Continent:o Asia: takes user to “difficulty selection” game state/screeno Europe: takes user to “difficulty selection” game state/screen

Select Difficulty:o Easy: depending on the user’s choice of continent, the corresponding quiz will start – for example, if

user chose “Asia” for “continent” and “Easy” for “difficulty”, the Asia Quiz on Easy will launch – entering the quiz game state.

o Medium: depending on the user’s choice of continent, the corresponding quiz will start – for example, if user chose “Asia” for “continent” and “Easy” for “difficulty”, the Asia Quiz on Easy will launch – entering the quiz game state.

o Hard: depending on the user’s choice of continent, the corresponding quiz will start – for example, if user chose “Asia” for “continent” and “Easy” for “difficulty”, the Asia Quiz on Easy will launch – entering the quiz game state.

Quiz Game State:o Depending on the user’s choice of continent and difficulty, the possible quizzes are:

Asia Easy Quiz Asia Medium Quiz Asia Hard Quiz Europe Easy Quiz Europe Medium Quiz

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 4

Europe Hard Quizo Selecting an answer from four options for a particular question in a quiz: options given as radio

buttons.o Correct answer upon submitted response: player is notified that their answer is correct and game

state proceeds to next question.o Incorrect answer upon submitted response: player is notified that their answer is incorrect and game

state proceeds only if the user has not run out of hangman chances, else the game will fail.o Quit quiz: if user clicks on the “quit quiz” option, they will be first notified and if they choose okay

they will return to first application state: Main Menu, else if they choose “cancel” they will resume the current question.

User wins the game:o User got 100% of questions correct: will be directed to the end of game state which will notify the

results and score of the user and commend the user on achieving 100 precent.o User passed, but didn’t get all of the questions correct: will be directed to the end of game state

which will notify the results and score of the user and commend the user on completing the quiz. User fails the game:

o User ran out of chances for the hangman component: if this is the case, the player will be alerted and the game will end, returning to the Main Menu game state.

IPO Chart:Below is the SPA’s IPO chart, which stands for “Input, Processing & Output”. It is a table listing all of the possible inputs the application will receive, all of the potential calculations/processing the application must perform, and all of the possible output the application must display.

INPUTS PROCESSING OUTPUTS

Radio button responses Check continent How to play informationDifficulty selection Check difficulty Selected continentContinent selection Generate quiz questions Selected difficultyUser confirmation of events Generate possible quiz responses Quiz question

Check answer Quiz numberSum of score during game Quiz question responsesGenerate hangman graphic Answers correctCalculate and keep sum of correct answers

Answers wrong

Calculate and keep sum of wrong answers

Score

Check hangman progress Hangman stageQuiz question image

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 5

Methods to Improve the Overall User-Interface/User-Friendliness, Application Aesthetics, Presentation and User-Proofing of the Application:

Create and provide at least a general instructions guide or user manual for users to utilize and aid their understanding in learning how to quickly and comfortably navigate and play the application. This guide will be made available via the online application.

Ensure that the application has exploited the capabilities of CSS and/or higher versions of CSS, such as CSS3, in order to greatly enhance the applications appearance, user-interface and overall feel for the user.

Create event or variable-specific alerts for the user throughout the various game states of the application. For example, if the user wishes to exit during a quiz, provide a “Quit” button, but also confirm whether the user wants to quit and as a result lose all of his or her progress and score on the quiz.

Screen Designs:This section will specify the way in which the application (if run from an external storage device) can be located, accessed and run. Please that this directive was created under Microsoft Windows 7 and the user-interface will therefore consist of that Operating System (OS).

Step 1: Access to My Computer

Step 2: Locate and access the External Storage Device

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 6

Step 3: Locate the folder “MajorProj_JS”, enter it and then navigate and access “Around_The_World” folder. Once there, locate the file, “atw.html”, click on it, and launch it – the application should now launch into a web browser. Note that for optimum functionality for the application please ensure the web browser is Mozilla Firefox ver 6.0.2.

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 7

Phase 2b Top-Down Design DiagramBelow is an exported image (PNG format) of the Inspiration Diagram. The original inspiration file is bundled with the “MajorProj_JS” folder, in which it is in a sub-directory from that folder called “Top-Down Design Diagram”.

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 8

Diagram Legend:

The graphic at the very top, with the “Score”, “Quiz Content” and “Current Hangman State” divisions, depicts the overall intended user interface/layout of the application. However, because this is the initial design phase, it may be the case that the final version of the product may have a slight different layout.

The red boxes/rectangles represent events and contain the specific event handler being used for that event. The blue ovals denote functions used by the application, in which any values given within the parenthesis

indicate a parameter being passed. The purple clouds symbolise game states in which the application enters at various stages. For example, a

game state would the Main Menu or at Continent Selection, and most important there is the In-Game State.

Phase 2c Algorithm DesignselectContinent()

replace HTML content from Main Menu with continentHTMLon mouse over a continent call showCont(contName)when user clicks on a continent call selectDiff(continentName)

END

showCont(contName)get current mouseover position on continent imagemapreturn name of continent

END

selectDiff(continentSelected)assign continentSelected parameter to global variablereplace HTML content with difficultyHTML

output difficulty buttonswhen user clicks on a difficulty button call loadQuiz(cont, diff)

END

loadQuiz(continent, diffSelected)assign diffSelected parameter to global variablecreate variable to hold Quiz Title HTMLIF continent = Asia THEN

IF difficulty = Easy THENcreate variable to hold Quiz Content HTMLDO = 2 to 6

generate radio button optionssend value of clicked radio option to chosenAnswer

ENDDOIF quizQuestionPosition = 7 THEN

generate finish quiz submit buttonwhen user clicks submit call checkAnswer()

ELSEgenerate normal quiz submit buttonwhen user clicks submit call checkAnswer()

ENDIFELSE IF difficulty = Medium THEN

create variable to hold Quiz Content HTMLDO = 1 to 5

generate radio button optionssend value of clicked radio option to chosenAnswer

ENDDOIF quizQuestionPosition = 7 THEN

generate finish quiz submit button

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 9

when user clicks submit call checkAnswer()ELSE

generate normal quiz submit buttonwhen user clicks submit call checkAnswer()

ENDIFELSE IF difficulty = Hard THEN

create variable to hold Quiz Content HTMLDO = 1 to 5

generate radio button optionssend value of clicked radio option to chosenAnswer

ENDDOIF quizQuestionPosition = 7 THEN

generate finish quiz submit buttonwhen user clicks submit call checkAnswer()

ELSEgenerate normal quiz submit buttonwhen user clicks submit call checkAnswer()

ENDIFELSE IF continent = Europe THEN

IF difficulty = Easy THENcreate variable to hold Quiz Content HTMLDO = 2 to 6

generate radio button optionssend value of clicked radio option to chosenAnswer

ENDDOIF quizQuestionPosition = 7 THEN

generate finish quiz submit buttonwhen user clicks submit call checkAnswer()

ELSEgenerate normal quiz submit buttonwhen user clicks submit call checkAnswer()

ENDIFELSE IF difficulty = Medium

create variable to hold Quiz Content HTMLDO = 1 to 5

generate radio button optionssend value of clicked radio option to chosenAnswer

ENDDOIF quizQuestionPosition = 7 THEN

generate finish quiz submit buttonwhen user clicks submit call checkAnswer()

ELSEgenerate normal quiz submit buttonwhen user clicks submit call checkAnswer()

ENDIFELSE IF difficulty = Hard

create variable to hold Quiz Content HTMLDO = 1 to 5

generate radio button optionssend value of clicked radio option to chosenAnswer

ENDDOIF quizQuestionPosition = 7 THEN

generate finish quiz submit buttonwhen user clicks submit call checkAnswer()

ELSEgenerate normal quiz submit buttonwhen user clicks submit call checkAnswer()

ENDIFENDIF

ENDIF

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 10

create variable to hold Quiz Subtitle HTMLconcatenate HTML string variables and replace current HTML contentincrement quizQuestionPosition by 1reset chosenAnswer to empty stringgenerate and replace scoreboard HTML with updated scoregenerate and replace current hangman state HTML with updated state

END

checkAnswer()IF continent = Asia THEN

IF difficulty = Easy THENIF chosenAnswer = empty string

display alert to user to input value before proceedingELSE IF chosenAnswer = asiaQuizEz[quizQuestionPosition-1] THEN

display alert that answer is correctincrement score by 100increment correctAns by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ELSEdisplay alert that user is incorrectincrement incorrectAns by 1increment hangmanState by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ENDIFELSE IF difficulty = medium THEN

IF chosenAnswer = empty stringdisplay alert to user to input value before proceeding

ELSE IF chosenAnswer = asiaQuizMed[quizQuestionPosition-1] THENdisplay alert that answer is correctincrement score by 100increment correctAns by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ELSEdisplay alert that user is incorrectincrement incorrectAns by 1increment hangmanState by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ENDIFELSE IF difficulty = Hard THEN

IF chosenAnswer = empty stringdisplay alert to user to input value before proceeding

ELSE IF chosenAnswer = asiaQuizHard[quizQuestionPosition-1] THENdisplay alert that answer is correctincrement score by 100

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 11

increment correctAns by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ELSEdisplay alert that user is incorrectincrement incorrectAns by 1increment hangmanState by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ENDIFENDIF

ELSE IF continent = Europe THENIF difficulty = Easy THEN

IF chosenAnswer = empty stringdisplay alert to user to input value before proceeding

ELSE IF chosenAnswer = europeQuizEz[quizQuestionPosition-1] THENdisplay alert that answer is correctincrement score by 100increment correctAns by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ELSEdisplay alert that user is incorrectincrement incorrectAns by 1increment hangmanState by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ENDIFELSE IF difficulty = medium THEN

IF chosenAnswer = empty stringdisplay alert to user to input value before proceeding

ELSE IF chosenAnswer = europeQuizMed[quizQuestionPosition-1] THENdisplay alert that answer is correctincrement score by 100increment correctAns by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ELSEdisplay alert that user is incorrectincrement incorrectAns by 1increment hangmanState by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 12

ENDIFENDIF

ELSE IF difficulty = Hard THENIF chosenAnswer = empty string

display alert to user to input value before proceedingELSE IF chosenAnswer = europeQuizHard[quizQuestionPosition-1] THEN

display alert that answer is correctincrement score by 100increment correctAns by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ELSEdisplay alert that user is incorrectincrement incorrectAns by 1increment hangmanState by 1IF quizQuestionPosition = 8; THEN

call endOfQuizELSE

call loadQuiz(continent, difficulty)ENDIF

ENDIFENDIF

ENDIFIF hangmanState = 4 THEN

display alert to user that game is overreload window to reset application to first state

ENDIFEND

endOfQuiz()create variable to hold Quiz Title HTMLoutput score to HTML fileIF incorrectAns = 0 THEN

display message to user that quiz results are 100%ENDIFreplace current HTML content with end of quiz HTML contentcreate return to menu button and when clicked call returnToMenu()make scoreboard disappearmake current hangman state division disappear

END returnToMenu()

reload window to reset application to first stateEND

quitQuiz()display message to user if they want to quitIF confirmExit = true THEN

reload window to reset application to first stateENDIF

END

howToPlay()display alert message to user containing game instructions text

END

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 13

PHASE 3 Implementation

Phase 3a ImplementationUpon implementation of this major project, my SPA “Around The World”, has been broken down into three source code documents: a HTML document, a JavaScript and a CSS document. Namely:

Source Code: atw.html script.js style.css

The document “atw.html” is the HTML code of this application and it will simply provide the structure for the content of the application as well as the divisions necessary to implement that structure. This document will also contain a small amount of HTML content code in order to generate the first state of the application which is the home screen. Because this is a Single Page Application, everything that is to be displayed on screen will be run through the atw.html.

The document “script.js” is the JavaScript source code for the ‘Around the World’ application. It provides the functionality of the entire application as well as holding the majority of quiz content because the design is premised on a SPA and not a multiple page application. This source code document is therefore the most crucial element for ensuring the overall application cohesiveness and communication with each module and process etc. This document lists all the application’s functions, variables and their scopes.

The document “style.css” is simply the CSS source code for the application which is used by “atw.html” in that this document denotes that appearance and feel of the application.

Please note that the source code of these three documents can be viewed by accessing the folder “Around_The_World”. In order to view these files with syntax highlighting and proper indentation please utilize code-editing software such as Microsoft Visual Web Developer 2010 Express or Notepad++, etc.

Phase 3b Documentation of Implementation (Complete User Manual)This section contains the complete version of the user manual, which is inclusive of screenshots and other visual elements that aid guide interpretation. However, please note that on the actual application, in the Main Menu game state, there is a more basic text-based game instruction guide created with the purpose of offering a more simplified and quick-to-read guide rather than the version of the guide below. The game is aimed at offering a fun and innovative way to learn about geography through trivia quizzes – whether the players are students, teachers or anyone else. The User Manual is therefore formulated to accommodate all those audiences:

USER MANUAL for AROUND THE WORLD: An Earthly Trivia

Main Menu/The User Interface:This screenshot denotes the primary game state: The Main Menu. This screen will activate when the application initiates for the first-time, when the user quits a quiz game or when the user has finished a quiz game and pressed the ‘Return to Menu’ button at the end of game screen.

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 14

To access the application-based instruction guide, please hover your mouse over “How to Play” and click the button. An alert will popup. This is the How to Play screen, as shown below:

Click “OK” to exit the popup and return to the Main Menu Screen.

Beginning the Game:To begin the game, from the Main Menu Screen, hover your mouse over the “New Game” button and click it.

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 15

After clicking the New Game button, the application will proceed to the Continent Selection Screen (or game-state). Here you may select the continent you wish to be quizzed on. To do so, simply however your mouse over a particular continent and take note of the textbox below the world map image – this textbox displays the name of the continent that your mouse is currently hovering over. For example, if you hover over the continent Asia (shown in red on the screenshot below), the textbox will display “Asia”. See below: (Refer to Phase 4b for more details on this section).

Once you’ve selected a continent to be quizzed on, the application will proceed to the Difficulty Selection Screen (or game-state). Here you will have to select the difficulty of the quiz on your chosen continent. To do so, simply click the appropriate button:

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 16

In-Game:After you have selected both the continent and difficulty the application will proceed to the quiz game screen (or in-game state). This is the main screen for in-game interaction. Here, as shown below, there are several features of the quiz game screen: Firstly, there is a quiz title and question number; below it is the question image (if playing on easy difficulty), the question itself, and the four given responses (radio buttons) possible to answer the question. On the left of the main content section is the score – this will keep count of all your correct answers; each correct answer earns 100 points. On the right of the main content section is the Current Hangman State – this keeps track of the number of incorrect answers the user has made by adding the next stage to the hangman after each incorrect submission. In the middle section (the main content or quiz content) at the bottom there are two buttons: the leftmost one, called “Submit and Go to Next Question”, is for once you’ve selected an answer from the four radio button options, click it and the application will verify your answer before proceeding to the next question. See below:

Verifying your answer:If you haven’t selected a radio button option and clicked “Submit and Go to Next Question” an alert will popup, asking you to input an answer before you proceed to the next question:

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 17

Otherwise, if you have selected an answer and clicked on “Submit and Go to Next Question”, an alert will popup notifying you whether you got the answer right or wrong:

Either “Correct!” or “Incorrect!”

If you have reached your forth incorrect answer, as explained above, the game will end and an alert will popup. You will also be return to the Main Menu:

Exiting the Game : During a quiz game, the user may exit at any stage, simply click “Quit Quiz” - which is the rightmost button.

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 18

Completing the Quiz/End of the Game : On the final quiz question , question 8, the “Submit and Go to Next Question” button will change to “Finish Quiz” and upon submitting your answer and after5 a popup verifying its correctness, the application will proceed to the final game state, the End of the Game Screen / Results Screen. This screen will display the quiz details (i.e. continent and difficulty) as well as results of your performance throughout the quiz, stating the correct/incorrect questions you got and your final score (display in the box element below). If you passed the quiz, but didn’t get 100% correct, the following screen will be generated:

Otherwise, if you achieved 100% on the quiz, a message will be added, commending you on your achievement:

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 19

Once you click “Return to Menu”, you will be returned to the first and main game state, The Main Menu.

PHASE 4 TestingIn order to ensure the Single Page Application functions as it should, without bugs and any errors, a rigorous testing regime had to be enforced during and after the code-writing phase. This testing phase helped eliminate any bugs that may have been present within the source code (mainly the script.js). Below is a table that overviews the testing process for Around The World SPA.

DateTest

DescriptionExpected

ResultActual Result

Source of Bug/Issue

Action Taken to Fix It

Date Fixed

9/09/2011

Trying to use JS to replace HTML content

HTML div=“content” should be replaced with the JS string

Original HTML content remained the same

Used more than one “.innerHTML” properties for the same div id.

Reduce JS statement to execute only 1 HTML DOM property per div being called.

10/09/2011

10/09

Layout adjustment Main Menu would appear in proper formation

Menu buttons weren’t in the right place and didn’t display properly

Structure/hierarchy of HTML divisions

Adjustment HTML divs to better suited hierarchy – i.e. left and right divs go before centre

10/09

11/09

Creating variable/s to store the quiz questions and answers

Quiz questions and answers should be stored with the answer matching the particular question and its list of options (four).

Quiz held questions, but wasn’t holding answers to match the particular question.

Wasn’t using multi-dimensional arrays

Created multi-dimensional arrays for every quiz. i.e. within a quiz question array, for every question, there were four options

13/09

13/09 Trying to output the question and its details (options, image, etc.)

Question should display on page along with the options and

Question details didn’t display at all

JS string to output details did not contain

Nested if statements were implemented to check the

16/09

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 20

image conditions to check which question from quiz to output

continent selected, the difficulty selected and the current quiz question position.

13/09

Use cookies to hold global variables

Global information will be retained by cookies in browser

Cookies weren’t retaining values properly

Cookies are ineffective for use on storing data within a single page load – aimed at sessions

Discard cookie approach and defined the variables in the JavaScript file as global

13/09

14/09

Using JS global variables to hold key data

The global variables will retain key values such as difficulty selected until page reload

As expected n/a n/a

n/a

15/09

Getting the image map to output the continents’ name on mouse over event

Names of continents display in textbox asynchronously when user hovers over the image map with mouse

Names weren’t displaying

Sub-Function used to display the names was placed inside the selectContinent() function

In order for it to work, the sub-function showCont() must be put outside the parent function. This is because the HTML processing is being done through JS

16/09

16/09

Testing to see if the value of the selected radio button in a question was carried through to check answer

After the user clicks the submit and proceed to next question button, the value of the selected radio button should be sent to checkAnswer() for validation

No value was sent

This is because incorrect convention was being used to send the value

Created a global variable chosenAnswer to hold the value from the selected radio button upon submission by using the “this.value” attribute on the radio element.

17/09

17/09

Testing to see if hangman graphic was being updated after each wrong answer

Hangman graphic would update after each question and send an alert if ran out of chances

Hangman did update but didn’t send alert when user ran out of chances

the if statement to check the value of the hangman at the end of checkAnswer()

The hangman status check was placed at the very end of the checkAnswer() function

17/09

17/09 Creating a check to ensure that the user doesn’t proceed to the next question without selecting a radio button

If the user hasn’t select a radio button when clicking submit an alert should popup stating to select a radio

No alert came up when no radio buttons were selected and the submit question button was clicked

The alert didn’t come up because when using the chosenAnswer variable to see

At the end of the loadQuiz() function, the global variable, chosenAnswer was reset to an empty string

18/09

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 21

button if it was empty, it wasn’t because it wasn’t cleared after each call of loadQuiz()

18/09

Testing to see if alerts successfully came up after each question submission to notify the user whether question was right or wrong

If the user got a question wrong, an alert saying incorrect should be displayed and vice versa if it was correct

As expected n/a n/a

n/a

18/09

Test to ensure the final question of a quiz displays the appropriate button values

On the last question of the quiz, the button “submit and go to next question” should be changed to “finish quiz!”

As expected n/a n/a

n/a

19/09

Testing to see if the final game state (at the end of a quiz) is properly displayed

Once the user clicked on “finish quiz” on the last question, they should be directed to the end of the game screen, showing their final score and results

As expected n/a n/a

n/a

PHASE 5 EvaluationThis evaluation is categorised into three headings: Application Evaluation, Process Evaluation and Possible Improvements. The first part of the evaluation assesses whether the final version of the application or product has met the stated goals and specifications listed in the design phase of this documentation. This section also evaluates the performance, reliability and ease-of-use that the SPA has achieved. The second part of the evaluation phase is to discuss the steps and stages throughout the design and development phases to ultimately determine the effectiveness, success and discoveries made through those stages of the Software Development Cycle (SDC). Lastly, the third category of the evaluation elaborates on the possible improvements that would have benefitted the SPA; whether those improvements could have been done throughout the design and development phase or whether they could be implemented in potential future versions of the application.

Application Evaluation“Around The World” was developed to for the web browser, just as aimed in the original task specifications. The SPA was also optimised for Mozilla Firefox version 6.0.2. This choice for particular browser optimisation was made because it was found that Mozilla’s 6.0.2 version of Firefox offered the widest range of the browser feature support such as CSS3 support and web developer tools such as an error console. “Around The World” also managed to maintain the element of a user-friendly interface by implementing a sleek, modern and simplistic design, avoiding

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 22

potential confusion by users through not creating extensive and messy page content. As a result this will allow the users to focus on the important elements of the application, such as the quiz itself, the score, and the hangman status, of which are all crucial in-game components.

As stated in the “Expected Results” section of this documentation, by implementing these features and approaches mentioned above, the game will in turn provide a positive and innovative learning experience for all audiences, including students and teachers. The implementation of the hangman component within a quiz, aids in creating a constructive learning atmosphere for students or a creative experience for audiences playing the game for leisure. This is achieved because the hangman component in a quiz would add depth to the quiz by creating a balanced pressure to do well in the quiz – in effect, this helps change the generic convention of trivia quizzes many users might have been used to. Another feature that may add to the innovative rework of trivia quizzes that this game offers is the inclusion of scores; the higher the score, the more it would vindicate a user’s knowledge – particularly on the harder difficulties. As provisioned in the task specifications, this application may in turn assist students who are studying social studies or simply geography as a subject.

By the end of the development phase, “Around The World” has resulted in being a fully functional web-based single page application, successfully utilising HTML, JavaScript and CSS – just as intended in the specification. The application has been ensured to use a wide variety of programming constructs and concepts as well as a lively blend of creative elements to not only enhance the user’s experience, but also allow them to come away with something society treasures: knowledge.

Process EvaluationThroughout the process of creating this application, it was ensured that the entirety of this project was founded on the programming premise that the “Software Development Cycle” offers, of which, in essence is ‘Design’, ‘Develop’ and ‘Evaluate’. Therefore, the implementation of the SDC would help keep the entire project on track and ensure that especially within the design and development phases, the process of each was being handled efficiently, constructively and with an open-mind for any ways to improve the project and its overall structure.

A proper approach to the design phase was crucial if a successful structure of functionality and layout for the application was to be implemented. However, upon completion of the development and implementation phase, an evaluation of the initial design approaches to the application suggests several opportunities for improvement. Although the Top-Down Design charts helped provide a useful structure to the SPA, the pseudocode could have been tweaked to give greater insight into approaching the processing requirements for this project. This tweak could have been as simple as devoting more attention to designing a more cohesive and efficient structure of code before proceeding to the code-writing stage.

Seeing as the greater purpose of the project was to demonstrate a full understanding of a number of coding techniques and more importantly the SDC, it was decided to focus more effort in these areas rather than generate all of the content for the stated quiz options. For example, during the continent selection game state, the user can currently only select Europe and Asia to be quizzed on, of which, each contain a quiz of eight questions for every difficulty, which are easy, medium and hard. As it should then be apparent that if all three quizzes was to be developed for every continent of the world, the application would contain a very large quantity of code that holds little to no functionality. Therefore, in order to meet stipulated specifications of the task, the development of the project required more attention to a variety programming functionality rather than an assortment of content.

Possible ImprovementsSince reaching the evaluation phase of the SDC, numerous improvements to the application have been thought of. However, several were thought of during the development phase, but due to the constraints of time allocation and resources available to develop this project, such improvements could not have been made with the final release of the product. Nevertheless, all the considered improvements that could be made to this SPA are listed below:

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 23

Extend Product Optimisation to Other Browsers:If the application was optimised for more than just Firefox 6.0.2, then it could open the availability of the application to a wider range of users.

Have quizzes on more continents:Perhaps in any future versions of this application, the quiz content library could be extended to accommodate quizzes for all the continents of the world, instead of just Europe and Asia.

Randomize Quizzes:By making each question in the quiz asked at random, but not to be repeated during a quiz game, it would allow for more replay-ability of quizzes and the game as a whole, and perhaps a more satisfying game experience for users.

Have a player profile that keeps a record of the player’s statistics and progress throughout the game:This could perhaps by the biggest improvement to the game, but it would also likely be the most difficult, on the basis that using JavaScript to retain permanent data is extremely difficult without having ready access to a database to store profile on. However, there may be alternatives, such as writing the data to a text file within the index directory of the application. If this venture was possible, the another world of opportunities and enhancements could be derived from it, such as an experience-point system for each registered player that after a certain level of points earned by each quiz (by using the “score” variable) the result could be added on to their total collection of points and the user could earn a level-up. Each level up could have a specific name, such as level 1 would be called ‘new traveller’, and level 2 could be called ‘travel guru’, etc.

After or within the ‘End of Game’ screen, include a list that displays all the incorrectly answered questions and compare the incorrect answer with the correct one, complete with an elaboration of the correct answer beside it:Beside each of these quiz question breakdowns, a statistic that displays the percentage of the users who got those questions right and wrong could also be included. However, for this to work, the above improvement for player profiles might have to be implemented.

Improve overall aesthetic feel of the game by creating more customised message boxes, buttons, and other event-driven elements:By doing this, users could create a more personal attachment to the game, because of more variety in the artistic presentation of the content and application itself.

Including sounds, music and effects to the application and it gameplay:Including music for the main menu or effects and other sounds during a quiz may be the gentle touch required to boost a user’s fondness and appreciation of the application.

Including a more extensive and visually explained user manual in the actual application:By having a more visually based user manual, users might find it easier to understand the game and its dynamics. Although a visual manual is included in this documentation, the application itself only has a brief text-based alert message version of the user manual. Perhaps an improvement for this could to be to include a link at the end of the already-existing text-based manual to a full and visually-based user manual for users interested in further reading of the game guide.

1 2 I P T : T e r m 3 M a j o r P r o j e c t – J a k e S k o r i c | P a g e 24