Task 237: Internet Technologies

Lab Report Assignment

Deadline: 1 March 2021
Archive all your solutions into a single zip file.

You are also required to submit your word document for question 5.

For completing this assignment, refer to the video samples in Task 237 Samples Folder
(under “Lab Report Samples”) to better understand the requirements for each part of the
questions. For Lab Report assignment, refer to the given files under folder name “Task 237
USE THIS”.

Apply your knowledge by developing a matching quiz using HTML, CSS, Javascript and
jQuery Library. The matching of questions & answers is listed in table 1.
Box Questions Answers
1 A fast, small, and feature-rich JavaScript library. It makes things like jquery
HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler.
2 It is the language we use to style an HTML document. It describes css
how HTML elements should be displayed.
3 It is the standard markup language for documents designed to be html
displayed in a web browser.
4 It refers to a HTML element which is used to draw graphics, on the canvas
fly, via JavaScript.
5 Quickly design and customize responsive mobile-first sites, the bootstrap
world’s most popular front-end open source toolkit, featuring Sass
variables and mixins, responsive grid system, extensive prebuilt
components, and powerful JavaScript plugins.
6 It is a JavaScript library that makes working with the HTML5 Canvas easeljs
element easy. Useful for creating games, generative art, and other
highly graphical experiences.
7 It is the process of creating a set of instructions that tell a computer programming
how to perform a task.
8 It takes you anywhere on the internet. It retrieves information from browser
other parts of the web and displays it on your desktop or mobile
device.
9 It is about creating web pages that look good on all devices! It will responsive
automatically adjust for different screen sizes and viewports.

Table 1
Assignment 1

You are only allowed to make changes to the javascript file “myScript.js”. Create and save
your solution in “Assignment_1” folder.

Implement a question generator for the quiz by randomly generate the questions to be
displayed in the question area and apply the list of answers to each of the 9 boxes.

1) Apply the following conditions to the list of answers to each of the 9 boxes shown in
Figure 1.

a) Display the answers in each of the 9 boxes provided.

(3 marks)

b) The list of answers for each of the 9 boxes must be unique.

(3 marks)

2) Apply the following conditions to randomly generate the questions to be displayed in the
question area shown in Figure 1.

a) Randomly generate a question from Table 1.

(3 marks)

b) Display the random question in the question area.

(3 marks)

3) Set the title of the Quiz and disable the “NEXT” button for the preparation of the quiz.

a) Display the title text “Select the correct term from the following definition” in the
instruction area.
(2 marks)

b) Disable NEXT button from user’s interaction.

(2 marks)

c) Disable RESTART button from user’s interaction.

(2 marks)
Figure 1
Assignment 2

You are only allowed to make changes to the javascript file “myScript.js”. Create and save
your solution in “Assignment_2” folder.

Apply the following condition when user to click on the answers from the 9 boxes that
matches with the question generated from Assignment 1.

1) Refer to Figure 2a, if user clicks on the box with the answer that does not match the
question listed in Table 1,

a) Set the background of the selected box with #820824.

(3 marks)

b) Disable the selected box to be clicked. Allow user to click on other unselected boxes. (3
marks)

c) The number of Score will decrease by 1.

(3 marks)

d) The number of Score will NOT fall below 0.

(3 marks)

2) Refer to Figure 2b, if user clicks on the box with the answer that matches the question
listed in Table 1,

a) Set the background of the selected box with #0f7a06.

(3 marks)

b) Disable the 9 boxes from user’s clicks.

(3 marks)

c) The number of Score will increase by 1.

(3 marks)

d) Enable NEXT button from user’s interaction.

(3 marks)
Figure 2a

Figure 2b
Assignment 3

You are only allowed to make changes to the javascript file “myScript.js”. Create and save
your solution in “Assignment_3” folder.

Develop a matching quiz allowing user to go through 10 randomly generated questions as

shown in Figure 3a and Figure 3b.

1) Set question number to “Question 1” at the start of the quiz.

(2 marks)

2) When user clicks on the NEXT button,

a) Increase and display the question number by 1 (e.g. Question 2, Question 3 etc).
(2 marks)

b) Reset the background of all 9 boxes to #434445".

(2 marks)

c) Enable all 9 boxes to be clicked.

(2 marks)

d) Randomly generate a new question from Table 1. The newly generated question
MUST NOT be the same as the previous question.
(2 marks)

3) After user went through the 10 randomly generated questions,

a) Display an alert showing the score with the message “Your total score is [score]”.
(2 marks)

4) After user dismissed the alert message,

a) Enable the RESTART button.

(2 marks)

b) Disable NEXT button from user’s interaction.

(2 marks)

c) Disable all 9 boxes to be clicked.

(2 marks)

d) Reset the background of all 9 boxes to #434445".

(2 marks)

e) Display the question number as Question 10.

(2 marks)
Figure 3a

Figure 3b
Assignment 4

You are only allowed to make changes to the javascript file “myScript.js”. Create and save
your solution in “Assignment_4” folder.

Improve the matching quiz to include medal images and randomise the answers from the 9
boxes as shown in Figure 4.

1) If user clicks on the box with the answer that matches the question listed in Table 1, add
a medal image to the Number of Medal earned area.
(4 marks)

2) If user clicks on the box with the answer that does not match the question listed in Table
1, remove a medal image to the Number of Medal earned area.
(4 marks)

3) For every question generated, randomly generate the answer to be displayed in the 9
boxes for the matching quiz created for Assignment 3.

a) The random answer for each of the 9 boxes must be unique.

(4 marks)

b) Display the random answer in each of the 9 boxes provided.

(4 marks)

Figure 4
Assignment 5

Enhance your game with a newly proposed feature and implement it. You are only allowed to
make changes to the javascript file “myScript.js”.
For assignment 5, save your files under folder name “Assignment 5”.

1) Describe the additional feature that you added to the game.

(4 marks)

2) Explain how the additional feature enhance the game.

(4 marks)

3) Implement the feature.

(12 marks)

---- END OF ASSIGNMENT ----