Final documentation major proj_js

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
12 IPT: Major Project
Documentation
Software Design with JavaScript
Semester 2 - Term 3
Designing a Single Page Application for the Web
2011
Jake Skoric
Hillcrest Christian College

Table of Contents
PHASE 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

PHASE 1 Problem Definition
Aim
The 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 productwill be a geography and trivia game named “Around the World: AnEarthly
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 Description
The 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.
Assumptions
In 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.
Limitations
Due 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.

Proposed Users
Overall, 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 Results
Various 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 Specification
Below 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 state
o How to Play: opens JS alert box that gives game instructions
Select Continent:
o Asia: takes user to “difficulty selection” game state/screen
o 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

 Europe Hard Quiz
o 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 information
Difficulty selection Check difficulty Selected continent
Continent selection Generate quiz questions Selected difficulty
User confirmation of events Generate possible quiz responses Quiz question
Check answer Quiz number
Sum of score during game Quiz question responses
Generate hangman graphic Answers correct
Calculate and keep sum of correct
answers
Answers wrong
Calculate and keep sum of wrong
answers
Score
Check hangman progress Hangman stage
Quiz question image

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

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.

Phase 2bTop-Down Design Diagram
Below 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”.

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 Design
selectContinent()
replace HTML content from Main Menu with continentHTML
on 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 imagemap
return name of continent
END
selectDiff(continentSelected)
assign continentSelected parameter to global variable
replace HTML content with difficultyHTML
output difficulty buttons
when user clicks on a difficulty button call loadQuiz(cont, diff)
END
loadQuiz(continent, diffSelected)
assign diffSelected parameter to global variable
create variable to hold QuizTitleHTML
IF continent = Asia THEN
IF difficulty = Easy THEN
create variable to hold Quiz Content HTML
DO = 2 to 6
generate radio button options
send value of clicked radio option to chosenAnswer
ENDDO
IF quizQuestionPosition = 7 THEN
generate finish quiz submit button
when user clicks submit call checkAnswer()
ELSE
generate normal quiz submit button
ENDIF
ELSE IF difficulty = Medium THEN
DO = 1 to 5
ENDDO
ELSE

ENDIF
ELSE IF difficulty = Hard THEN
DO = 1 to 5
ENDDO
ELSE
ENDIF
ELSE IF continent = Europe THEN
DO = 2 to 6
ENDDO
ELSE
ENDIF
ELSE IF difficulty = Medium
DO = 1 to 5
ENDDO
ELSE
ENDIF
ELSE IF difficulty = Hard
DO = 1 to 5
ENDDO
ELSE
ENDIF
ENDIF
ENDIF
create variable to hold Quiz Subtitle HTML
concatenate HTML string variables and replace current HTML content

incrementquizQuestionPosition by 1
reset chosenAnswer to empty string
generate and replace scoreboard HTML with updated score
generate and replace current hangman state HTML with updated state
END
checkAnswer()
IF continent = Asia THEN
IF chosenAnswer = empty string
display alert to user to input value before proceeding
ELSE IF chosenAnswer = asiaQuizEz[quizQuestionPosition-1] THEN
display alert that answer is correct
increment score by 100
increment correctAns by 1
IF quizQuestionPosition = 8; THEN
call endOfQuiz
ELSE
call loadQuiz(continent, difficulty)
ENDIF
ELSE
display alert that user is incorrect
increment incorrectAns by 1
increment hangmanState by 1
call endOfQuiz
ELSE
ENDIF
ENDIF
ELSE IF difficulty = medium THEN
ELSE IF chosenAnswer = asiaQuizMed[quizQuestionPosition-1] THEN
call endOfQuiz
ELSE
ENDIF
ELSE
call endOfQuiz
ELSE
ENDIF
ENDIF
ELSE IF chosenAnswer = asiaQuizHard[quizQuestionPosition-1] THEN

call endOfQuiz
ELSE
ENDIF
ELSE
call endOfQuiz
ELSE
ENDIF
ENDIF
ENDIF
ELSE IF continent = Europe THEN
ELSE IF chosenAnswer = europeQuizEz[quizQuestionPosition-1] THEN
call endOfQuiz
ELSE
ENDIF
ELSE
call endOfQuiz
ELSE
ENDIF
ENDIF
ELSE IF difficulty = medium THEN
ELSE IF chosenAnswer = europeQuizMed[quizQuestionPosition-1] THEN
call endOfQuiz
ELSE
ENDIF
ELSE
call endOfQuiz
ELSE
ENDIF
ENDIF

ELSE IF chosenAnswer = europeQuizHard[quizQuestionPosition-1] THEN
call endOfQuiz
ELSE
ENDIF
ELSE
call endOfQuiz
ELSE
ENDIF
ENDIF
ENDIF
ENDIF
IF hangmanState = 4 THEN
display alert to user that game is over
reload window to reset application to first state
ENDIF
END
endOfQuiz()
create variable to hold Quiz Title HTML
output score to HTML file
IF incorrectAns = 0 THEN
display message to user that quiz results are 100%
ENDIF
replace current HTML content with end of quiz HTML content
create return to menu button and when clicked call returnToMenu()
make scoreboard disappear
make current hangman state division disappear
END
returnToMenu()
END
quitQuiz()
display message to user if they want to quit
IF confirmExit = true THEN
ENDIF
END
howToPlay()
display alert message to user containing game instructions text
END

PHASE 3 Implementation
Phase 3a Implementation
Upon 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 forAROUND 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.

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.

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:

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:

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.

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:

Once you click “Return to Menu”, you will be returned to the first and main game state, The Main Menu.
PHASE 4 Testing
In 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.
Date
Test
Description
Expected
Result
Actual 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/hier
archy 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

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
selectContinen
t() 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

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 Evaluation
This 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

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 Evaluation
Throughout 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 Improvements
Since 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:

 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.

Final documentation major proj_js

Recommandé

Recommandé

Contenu connexe

Similaire à Final documentation major proj_js

Similaire à Final documentation major proj_js (20)

Plus de hccit

Plus de hccit (20)

Dernier

Dernier (20)

Final documentation major proj_js