In this assignment, you’ll write a program to display flashcards to help learn the names of your fellow students in the DSA class. To get you started, here is a basic web page with student names and faces.
Unzip the provided page and upload the whole directory to c9.io. Then view the page. You should see several pictures of smiling faces, each followed by a name. (Apologies if your picture is not included – this was the roster as of April 15.)
Your goal is to write code in the file flashcards.js such that
All flashcards except one randomly chosen card are initially hidden, using the css display: none property. (Look at the style block in the HTML to see usage of display, and feel free to look up the display property online.)
When the Next button is pressed, the current flashcard is hidden, and a new random flashcard (including both image and caption with name) is displayed.
Don’t try to do everything at once. Write small, useful functions and test them. For example, perhaps you might write a function to hide the image for a card, based on the number of the card (1..29). This function will have to take the number (an integer) and create a string with the id of the image (look in the HTML file), use getElementById appropriately, and then change the style of the image. Test it before you go on!
Once you have functions to show and hide flashcards, think about the main flow of the program. What should happen when the page is first loaded, before the user does anything at all? What should be shown or hidden? What should happen when the user presses Next? You can use console.log commands in each function to print out what you think should happen, so that you are sure the functions are being called when you think they are.
This section and the next few are not required as part of the regular assignment, but give a few ideas about how you might extend the assignment to score more than the basic 10 points.
You may have noticed that the for the basic assignment, names and cards are shown at the same time. This makes it hard to test your knowledge once you’ve learned some names. Modify the code so that pressing the next button just shows the image, and not the caption. Then have the caption appear after a few seconds.
Be careful; if you use setTimeout to display the caption, you might also hide the next button using the visibility css property, so that the user doesn’t get ahead in cards before the answer is displayed.
Pressing ‘next’ is annoying if you have a keyboard. Add keyboard control.
Learning all 29 names at once is impractical. Come up with a better strategy; for example, teach the user the first three names, then add a few more, balancing review of names already studied with new names at frequencies that you find make sense.