Assignment1 Comp1073

This document provides instructions for Assignment 1 which asks students to emulate the classic children's toy "See 'N Say" using HTML, CSS and JavaScript. Students are to create a web app with 5 buttons that, when clicked, will randomly select words from predefined arrays and concatenate them to build a sentence that is then spoken aloud using the TextToSpeech API. The app must be properly structured and commented, with the JavaScript organized and offering a creative solution. Students will submit the URL to their deployed web app for grading based on the rubric provided.

Uploaded by

hassan nasir

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

49 views3 pages

Assignment1 Comp1073

Uploaded by

hassan nasir

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 3

COMP1073 – Client-Side JavaScript

ASSIGNMENT 1- 15%

Emulating a Classic Toy with a Web App

DESCRIPTION

Using the provided HTML, CSS, and JavaScript as a starting point, emulate the user

experience of the popular children’s toy, the Mattel® ‘See ‘N’ Say Storymaker’.

INSTRUCTIONS

1. Watch the short video at https://www.youtube.com/watch?v=gG8y_e6t0G4

(limegl0wstix, 2010), and carefully watch how the user interacts with the toy.
2. Download the provided .zip file (includes HTML, CSS, and JS), extract the
contents, then open the HTML file in a browser and click on the button.
3. Examine the JavaScript – note that by setting a string value to the variable,
textToSpeak and clicking the button, the built-in TextToSpeech API will read
the words aloud (in every browser except MSIE – but Edge is fine).
4. Edit the HTML file to include 5 buttons – each one will pick a random phrase from a
JavaScript array (use the image on the last page of this assignment to build each of the
five arrays). Note that the first column is a list of nouns (forming the sentence subject),
the second is a list of verbs, the third is a list of adjectives, the fourth, another list of
nouns, and the fifth consists of a number of places (or settings).
5. The user will push each of the buttons, and each will concatentate the random word
from it’s array, eventually building the text string that will be assigned to the variable
textToSpeak.
6. Create a sixth button that will actually pass the value to textToSpeak to the
speakNow() function (this part of the assignment is already built for you).
7. Once you’ve completed the functionality of the interface, add some CSS to make the
page visually attractive (don’t spend too much time on this – the focus is the JS).
8. Ensure that all your HTML, CSS, and JS is well-commented, formatted, and organized.
9. Upload your application to a webserver.
10. Post the URL to Assignment 1 on Blackboard.
COMP1073 – Client-Side JavaScript ASSIGNMENT 1

SUBMITTING YOUR WORK

Upload the HTML, CSS and any media files to a web server and then post a link to the
document in the assignment on Blackboard. Your work will not be graded unless it is posted
on a web server.

EVALUATION

Please refer to the chart (assessment rubric) below. You will be graded on how well you
followed the assignment instructions from both a technical and a creative perspective as
spelled out in the rubric. This assignment is weighted in terms of your final mark as
indicated on the course syllabus.

Criteria Mark

HTML, CSS, and JavaScript is valid, properly structured, formatted 3

and commented.
JavaScript is well organized, with appropriate variable names and 3
helpful descriptions for each section of the script.
The basic functionality of the application is complete. 6
The JavaScript is thoughtfully organized, and it offers a creative 3
solution to the application requirements.

TECHNICAL EVALUATION

OTHER RESOURCES

Use the image on the next page as a guide as you build out the files for this application

2
COMP1073 – Client-Side JavaScript ASSIGNMENT 1