Assignment
In this assignment you must create a browser-based flashcard application. A flashcard application is a kind of quiz or drill. The user is shown a picture and has to enter or choose the corresponding word (or phrase). After that, the user is shown the correct answer. Then the application moves on to the next picture. For this assignment, your HTML page must have a space for a picture and four buttons. The buttons must be labeled. The choices can either by written as labels in a button, or they can be text next to a button. There should also be two other buttons for "correct answer", and "next". Finally the page should show the number of images that have been shown so far in this round, and the number of the user's correct answers. For managing the pictures, you should have a list of urls to load the pictures. Unlike in the previous assignments, in this case the pictures themselves can and should be on the Web (not in the same place as the assignment page). If the pictures are all in the same place on the web, then you need only a list of the file names, and use that to compose the full URL. On your page, use JavaScript code to compose and write out the line of HTML to load the next image in the appropriate space.
For the choices when a new picture is loaded, all of the buttons should have names that were randomly chosen from among the names that go with other pictures. One of the choices (but not always the same one) should be the correct answer. Which button holds the correct answer should also be randomly chosen. When the use has selected a choice, the page should display something to indicate correct or incorrect. It can be whimsical, like a celebration of every correct answer, or it can be simple and serious. Clicking on the "correct answer" button should highlight the choice that was correct.
This option should work even if no choice was made (thus allowing the user to conduct a "training" session). Clicking on the "Next" button should set up the next challenge by loading a new image and relabeling the 4 buttons. There is no need for a start or restart button. The user just has to reload the page. Ideally, when the page is first loaded, it should create a random ordering in which to show the images. The order should not be the same each time the page is first loaded. That way, each time to the user reloads the page, they will be shown the images in a different order. Think of ways to do this without actually moving the values in the list (e.g. one possibility is to create a separate "map" list from one sequence to another). The dice example of the book provides you examples for parts of a web page involving random selection, a button, and rewriting images.
For the subject matter, you have several choices. It can be practice for learning people's names. In my experience, people who know the names and titles of all the higher-ups in the workplace are more likely to be promoted. This could be a tool to help you move up at work. I would like such a tool for learning students' names. I don't have students' pictures. But the faculty's pictures are all online and have a fairly standard location and size. It could be a program to learn the names of the CEC faculty. Another choice could be the names of presidents. The names should be combined with the faculty subject area, or the president's years in office. For a diplomat, it could be foreign leaders and their country. It can be practice for learning a language. It should have pictures of objects and their names in the foreign language. If the language uses genders (i.e. most European languages), or tones (several Asian languages), that should be included with the word.
It can be practice for learning the names of things, like car models, airplanes, birds, fishes, or insects. Birdwatchers need to know what they saw, and fishermen need to know what they caught. In the military, pilots have to learn the identities of airplanes by sight in order to know what they are dealing with, so they practice with airplane silhouettes.
• It can be to learn the name of the parts of something. For example, it could be for the names of bones or muscles for a healthcare worker or fitness trainer. Those things have obscure medical names. New factory workers also need to learn the names of parts they are assembling or tools they are using. A twist in this case would be to use the same image for every case, but display a circle or arrow for the part currently in question.
For this assignment, the images should already be available on the web. You are to load them from their current location into your page, as needed. The application has to run, and I do not want you submitting images with this assignment. Doing so will get you closer to the next assignment, when you will redo this page using a database and PHP. You should submit your html page together with the css and/or js pages, if you used them.
Attachment:- Web-Project-Assignment.zip