Assignment 1 - Memory Training GameMCD4290, Trimester 1, 2020Due: Week 5, 23:55Worth: 12% of final markAimFor this assignment your team will develop a memory skill game based on theelectronic game Simon, produced by Hasbro. You will create a web app that displaysrandom sequences of colours which the user must repeat from memory. As the usercontinually enters correct sequences the game progressively selects longersequences.BackgroundSimon is a 40-year-old electronic game, currently produced by Hasbro(https://en.wikipedia.org/wiki/Simon_(game)). The game has four coloured buttonsthat light up and play a sound in sequence. The user then has to replicate thesequence by pressing those buttons in the same order. The sequences becomeprogressively longer and more difficult until the user is unable to repeat thesequence and the game ends.While such games are entertaining, the complexity and randomness of thesequences also allows the game to be used as a means of practicing memorystorage techniques. There is some evidence that individuals with mild cognitiveimpairment can benefit from memory enhancement training1from games such asSimon.Your team has been hired by Thoughtress, a small firm that develops memory skillgames for researchers and individuals to evaluate improvement in memory ability.Normally they develop these games as physical electronic devices, however theywish to make their services more accessible to those in rural areas. To this end yourteam has decided to develop the game as a mobile web app.Background: Example sequencesBelow are some example sequences that might be shown when playing the game:Background: Game progressionThe difficulty level (sequence length) increases after the user gets a certain numberof sequences of that length correct. The number of correct sequences needed toadvance is shown in the table below. (The number is always two less than thesequence length.)For example, at the start of the game, the player is given sequences of length 4. Theplayer receives RRGB followed by GGBY and they get both correct. Since they haveentered two sequences correctly, the game now increases to sequences of length 5.The player then receives YYGBR (a sequence of length 5) and needs to enter 3 offurther correct sequences to advance to sequences of length 6.Any time the player makes a mistake, they start again at the previous level (or resetto level 4 if they make two consecutive errors). The player cannot be givensequences shorter than 4 (as this is the starting level).3Angles obtained from the phone using device orientationThere are some situations where it may be too difficult for the user to interact withthe app using the buttons on the screen (for example while wearing gloves). Assuch, we want to allow users to control the app using the phone’s orientation.When using device orientation there are three angles that you have access to: alpha,beta and gamma; where beta represents the forwards-backwards tilt of the phone. Itcan visualised as below:Figure 1 side view of phone at different beta anglesAs in the figure above, where we are looking at the phone from the side, this meansthat when the device is flat on a surface, screen facing up it will have a beta of 0degrees, tilting the top of the phone down gives a beta of -45 and tilting the top of thephone up gives a beta of +454As in the figure above, where we are looking at the bottom of the phone, being flaton a surface gives a gamma of 0 degrees, tilting the phone to the left gives it agamma of -45 whereas tilting to the right gives it +45 degreesYou can observe these Beta and Gamma values on the team phone using theSensor Test app available on Moodle under “Assignment 1 Resources”.5What you are provided withWe have provided a skeleton version of the app, which displays the basic interfaceof the app and includes:● Code that triggers the userChoiceTimeout function in gameLogic.js⎯ This function is called when the user fails to make a decision after 2seconds.● Code to trigger the giveNextSequence function in gameLogic.js⎯ The giveNextSequence function will be called automatically every timethe user clicks on the play button.⎯ This function should return a list of strings which can include thefollowing:▪ “blue”▪ “green”▪ “yellow”▪ “red”⎯ For example [“blue”,”blue”,”green”] which would correspond to asequence of BlueBlueGreen● Code to trigger the sequenceHasDisplayed function in gameLogic.js⎯ This function is called when the sequence that has been returned bythe giveNextSequence function has finished being shown to the user.⎯ This is an opportunity to display information to the user prior to thementering a sequence.● Code to trigger the changeMode function in gameLogic.js⎯ This function will be called when the user switches input modesbetween touch input and tilt input. The initial input method is touch.⎯ This function has a parameter mode which will contain TOUCH_MODEor TILT_MODE depending on the mode the user has just switched to.● The showSuccess and showFailure functions⎯ These functions can be called by your code to display an image of atick or cross based on whether the user has entered a correct orincorrect sequence.⎯ The tick or cross will automatically disappear after one second.● Four coloured buttons arranged in a circle on the screen6⎯ These buttons are designed to be clicked (or tapped on) by the user.⎯ When clicked, each of these buttons will result in a call to thebuttonSelected function in gameLogic.js⎯ When the buttonSelected function is called, it will be passed one of thefollowing strings as an argument representing which of the four buttonswas clicked on:▪ “blue”▪ “green”▪ “yellow”▪ “red”● A Play button on the app’s title bar which displays the next sequence for theuser to enter and results in each request to your giveNextSequence function.● A displayToastMessage function which you can call to have a “toast”message pop up at the bottom of the screen to notify the user of someinformation.Other than this, you don’t need to know anything else about the skeleton to use it.You need to implement the functionality described below.The app skeleton can be found in the MCD4290 “Assignment 1” section on Moodle.The app skeleton is titled Skeleton.zip and contains a file ‘gameLogic.js’ where youshould write your submission.You don’t need to understand the other files we provide you with as part of theproject skeleton -- they include some concepts we haven’t yet covered.7What you need to doGetting started1. As a team you should download a copy of the project skeleton and unzip this.2. The ‘skeleton’ folder contains the code of the web app.3. You should open the entire skeleton folder in brackets to understand theworkings of the files for the assignment.4. You will implement your solution in the ‘gameLogic.js’ file.5. You should discuss within your team on the breakdown of coding features andresponsibilities. It is recommended that you practice pair programming.6. Plan to have steady progress rather than complete the assignment at one go,or to do it at the last minute.8Programming tasksThe Programming component of this assignment is worth 9% of your unit mark. Forthe programming tasks, we suggest you complete each part together before movingonto the next one.Feature 1: Generating random sequencesThe first step to displaying sequences on the screen is to generate those sequences.This should be done in the giveNextSequence function and returned as an array ofstrings. You should use the random method of the Math package to producerandom numbers to represent any given option. Note: Your code will need to savethe generated sequence for checking against the sequence entered by the user.Feature 2: Sequence inputThe buttonSelected function will be called every time the user clicks on one of thecoloured buttons. You should keep track of which buttons the user presses and theorder they were pressed in.Once the full sequence has been entered, you should compare what the user hasentered against the original sequence. If the sequences match then you should callthe showSuccess function, otherwise you should call the showFailure function. (Bothfunctions are part of the app skeleton.)Feature 3: Increasing difficulty levelYou should keep track of how many consecutive sequences the user has enteredcorrectly at the current level. When the user gets enough correct in a row (seebackground, game progression), the game should advance to the next level.Feature 4: Resetting difficulty levelIf the user enters an incorrect sequence, they should be taken back to the previouslevel. For example, if they provide an incorrect sequence for a sequence of length 6,they need to do sequences of length 5 again (3 of them) before they get a sequenceof length 6 again.If the user makes two mistakes in a row, they are reset to the starting sequencelength of 4.This means that you will need to track the level the player is on and the number ofsuccessful/unsuccessful sequences entered.9Feature 5: Displaying status and progressYou should show on the screen (via the label with the id ‘output’) the currentprogress of the user, including:● Number of items remaining to be entered for the current sequence.● Length of the current sequence● Number of correct sequences entered at the current level● Remaining additional correct sequences until they advance to the next levelYou should also display general status such as whether the user is currentlyexpected to enter a sequence or watch a sequence.This progress information should be updated anytime any of this informationchanges.Feature 6: Tilt-based input methodYou should add an alternative control scheme where the user tilts the phone towardsthe button they wish to light up. In order to do this, the app must be able to respondto changes in the orientation of the device using the DeviceOrientation event. Seethe Background “Angles obtained from the phone using device orientation” section.The app has a button to switch between input modes which results in a call to yourchangeMode function which has a parameter mode which will either beTOUCH_MODE or TILT_MODE depending on the mode. You may need toremember this value in your code.You should modify your app so that it can track the orientation of the phone. Whenthe phone is tilted toward the bottom-left of the phone this should be treated as theuser attempting to select the bottom-left button (i.e., the yellow button). Likewise, forthe other three buttons.There is already code in the main.js file (supplied with the skeleton) which triggersthe buttons to light up and runs the buttonSelected function (that you’ve alreadyimplemented). Each of these functions are named for the corresponding buttons theylight up: selectYellowButton, selectRedButton, selectBlueButton orselectGreenButton (also aliased as selectBottomLeftButton,selectBottomRightButton, selectTopLeftButton and selectTopRightButton).The DeviceOrientation JavaScript event will notify you (via a callback function)whenever the device orientation changes, but this might be many times asecond. For this reason, we don’t want to select a button as a result of every 10orientation change, but rather just store the button that would be selected, and thenwe can actually register this selection after the standard button press timeout occurs(i.e., a call to your userChoiceTimeout function). Hence, if the app is in tilt controlmode when your userChoiceTimeout function is called you should see if the phone istilted and if so then select the appropriate button.Feature 7: show tilt while in tilt modeWhile the app is in tilt mode, you should ensure that you display the current tilt of thephone visually. This should be done in such a way that its clear to the user whicMCD4290作业代写、代做skill game作业、代写web/css编程语言作业、代做web/HTML作业 调试Mahbutton will end up being selected on userChoiceTimeout.Hint: You can either display the current button selected by tilt in tilt mode on theoutput area or use CSS styling to display a selected border around the item. Forexample, if your reference to the button is BLRef then you can doBLRef.style.borderStyle=solid. Dont forget to reset it to none when you dont needit selected!11PresentationThis assignment includes a presentation component worth 3% of your unit mark.Thoughtress have had their representatives look over the app your team hasproduced and are pleased with the results however despite initially agreeing withyour teams suggestion of a mobile web, they now ask your team to get the app inthe Google PlayTM store and Apple AppStoreTM. In other words, they are asking yourteam to completely redesign the app as a native app for Android and iOS devices.Your team has little experience with iOS apps however you have worked closely withanother organisation (IntellAppt) in the pastwith extensive experience with both Android and iOS development environments.After some negotiation, it is agreed that IntellAppt will handle this redevelopmentwhile your team takes more of a support role and a handover presentation isorganised for three weeks’ time.In your Week 6 prac class your team will deliver a handover presentation. Your teamshould present an overview of the functionality, design of the app and any specifichardware requirements. You should warn the new team about any current issues inyour app as well as provide any suggestions for improvements. You should notpresent about the code of the app, as IntellAppt is not using Javascript in theirredevelopment. As with any good presentation, it should be prepared well inadvance of the due date (including any visual aids) and it should be well rehearsedas a group and individually.FormatEach student team will deliver a 10-minute oral presentation (in prac class)describing and demonstrating the functionality of their app and detailing anylimitations of the application. Every member of the team should present for 2-3minutes.● The target audience for this presentation is another team who will beextending the project further.● This presentation would be delivered in a formal business setting and so allteam members should be dressed appropriately.● This presentation must discuss the structure and functionality of theapplication as well as any design decisions made.12Testing the app1. Connect your Android phone with your laptop, using USB cable.2. To save your assignment folder on your mobile device select “Transfer files(MTP) option under Use USB for.3. A folder will open in your laptop displaying all the storage folders in the phone.4. On your phones, Open Google Chrome, and type file:///sdcard/ in the addressbar.5. Then select your folder and click on the index.html file.6. Note that if are using MacBook, you have to download and install the AndroidFile Transfer to enable file transfer from laptop to the phone.Programming resources● Mozilla Developer Network - Math.random documentation● Mozilla Developer Network - Detecting Device Orientation13SubmissionYour team should submit their final version of the application online via Moodle. Youmust submit the following:● A zip file named based on your team (e.g., \Team014.zip).This should contain ONLY one file named gameLogic.jsThis should be a ZIP file and not any other kind of compressed folder(e.g. .rar, .7zip, .tar).The submission should be uploaded by the team leader and must be finalised byWeek 5, 23:55. Please note: Your entire team needs to accept the assignmentsubmission statement individually on Moodle.You also need to individually complete the CATME peer assessment survey asdescribed below. You also need to individually complete the following tasks:● CATME peer assessment survey● Assignment code interviewYour presentation will be given during your practical classes in Week 6.14Marking criteriaProgramming tasksYour assignment will be assessed based on the version of “gameLogic.js” file yousubmit via Moodle. Before submission check your code still works with the originalapp skeleton, in case you have modified your copy of any of the other files. We willrun it with the original app skeleton and test it on your team smartphone. We will usethe same phones when marking your assignments.Assessment criteria:● Whether the app functionality satisfies the assignment specification● Quality of app source code, including structure and documentationYou will be marked as a group; however, your individual marks will be subject topeer review moderation based on CATME feedback and your assignment interview.A detailed marking rubric is available on the unit Moodle page in the “Assignment 1”section.15CATME Peer AssessmentYou are expected to work together as a team on this assignment and contributeroughly equal amounts of work. Peer assessment will be conducted via the CATMEonline system. You will receive email reminders at the appropriate time.Not completing the CATME peer assessment component may result in a score ofzero for the assignment.Do:● Give your teammates accurate and honest feedback for improvement● Leave a short comment at the end of the survey to justify your rating● If there are issues/problems, raise them with your team early● Contact your demonstrators if the problems cannot be solved amongstyourselvesDo NOT:● Opt out of this process or give each person the same rating● Make an agreement amongst your team to give the same range of mark16Assignment code interviewDuring your week 6 prac class your demonstrator will spend a few minutesinterviewing each team member to individually gauge the students personalunderstanding of your Assignment 1 code. The purpose of this is to ensure that eachmember of a team has contributed to the assignment and understands the codesubmitted by the team in their name.You will be assigned a score based on your interview, and your code mark will bepenalised if you are unable to explain your team’s submission:Score Description PenaltyNounderstandingThe student has not prepared, cannot answer eventhe most basic questions and likely has not even seenthe code before.100%TrivialunderstandingThe student may have seen the code before and cananswer something partially relevant or correct to aquestion but they clearly can’t engage in a seriousdiscussion of the code.30%SelectiveunderstandingThe student gives answers that are partially correct orcan answer questions about one area correctly butanother not at all. The student has not preparedsufficiently.20%GoodunderstandingThe student is reasonably well prepared and canconsistently provide answers that are mostly correct,possibly with some prompting. The student may lackconfidence or speed in answering.10%CompleteunderstandingThe student has clearly prepared and understands thecode. They can answer questions correctly andconcisely with little to no prompting.0%17PresentationStudents are marked individually for this assignment on their presentation skillsAssessment criteria:● Voice is of appropriate volume, speed and enthusiasm● Language is appropriate for a formal context and jargon is only used wherenecessary (and explained if used)● Eye contact is consistent and covers most of the audience● Body language complements the presentation● Explanations are clear and visual aids used appropriatelyA detailed marking rubric is available on the unit Moodle page.18Other informationWhere to get helpThere will be a FAQ are added at the bottom of this document. You can also askquestions about the assignment on the General Discussion Forum on the unitsMoodle page. This is the preferred venue for assignment clarification-type questions.You should check this forum (and the News forum) regularly, as the responses of theteaching staff are “official” and can constitute amendments or additions to theassignment specification. Before asking for a clarification, please look at the FAQand forum.Plagiarism and collusionCheating, Plagiarism and collusion are serious academic offenses at MonashUniversity. Students must not share their teams work with any student outside oftheir team. Students should consult the policies linked below for more information.https://www.monash.edu/students/academic/policies/academic-integrityhttps://eng.monash.edu.au/current-students/cheating-and-plagiarism.htmlSee also the video linked on the Moodle page under the Assignment block.Students involved in collusion or plagiarism will be subject to disciplinary penalties,which can include:● The work not being assessed● A zero grade for the unit● Suspension from the University● Exclusion from the UniversityYou are required to reference code that has been obtained or provided by othersources (i.e. online), including formulas for calculating. This should be done within acomment above the code.Late submissionsWe do not grant extensions on the assignment unless the majority of a team hasbeen affected substantially over the period of the assignment by factors out of yourcontrol, as outlined in the special consideration form.Such special consideration applications should be made to the unit email addresswith a completed form and supporting documentation within two business days of theassignment deadline for each affected member.http://www.monash.edu/exams/changes/special-consideration19Without an approved extension, late submissions are not accepted.Unavailable team membersIf team members are missing on the day of the presentation, the remaining membersshould proceed without them. Missing team members will receive a mark of zerounless they are granted special consideration. Such special considerationapplications should be made to the unit email address with a completed form andsupporting documentation within two business days of the presentation date.http://www.monash.edu/exams/changes/special-considerationYou must also inform your team members if you will be absent on the day of thepresentation.20Frequently asked questions1. How do I start this assignment? Im confused!Begin by reading the what you are provided with and features in theinstructions. The background reading provides some information on how to dothe different steps themselves.2. There is something in the instructions I dont understand.Read #1, then ask us on the forums or in-person what you dont understand.We are happy to assist.3. Will the assignment app work on an iPhone? Can I use my own Androidphone?No. Youre welcome to use your own Android device for testing but there arecaveats - the device orientation sensor api has to be implemented differentlydepending on the device, platform and browser version youre using.4. Can we use global variables?Yes you can. Remember to declare them using let instead of var. HOWEVER,your team should think about the minimum scope required, so dont haveeverything global because you will lose marks. If your variable only needs tobe accessed by one function, put it in that function instead.5. How do I debug on the phone?Plug in your phone via usb to the PC/Laptop with Google chrome browserinstalled.You can go to developer options -> enable usb debugging.Then in Chrome, go to F12 (developer tools) -> Sources -> ⋮ -> moretools -> Remote devices -> (Accept the debugging notice on your phone) ->inspect the correct tab open in chrome on the phone. The debugger herewould basically be the same as the debugger on your regular browser tabswhile the phone is connected.6. I need help!Come to the regular during-hours help desk sessions, post on the forums forhelp, or ask your friendly teacher in class. 转自：http://www.6daixie.com/contents/19/5006.html
