Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.
This week, we'll write code to create a set of online flashcards.
Let's create a PHP service that outputs flashcard data
flashcards.php
. Upload it to Webster and point your web browser to it on Webster.
glob
and scandir
array_rand
function useful. It selects a random index of a passed in array.
flashcards.php
page to take a parameter called mode
. When the user passes in a mode value of categories
your service should output a list of all of the folder names in http://webster.cs.washington.edu/cse154/services/flashcards. Otherwise, your web service should behave as before.
Now alter your web service to output the question and answer in the XML format displayed below:
<card>
<question>
What unusual thing did Catherine the Great store on her roof?
</question>
<answer>
Cows
</answer>
</card>
All card files have two lines. The first is always the question and the second always the answer.
Update flashcards.php
to output JSON data in the format below when sent the parameter ?mode=categories
{ categories = [{math : 20}, {computerScience : 13}, {history, 12}] }
The catagories are the names of the folders inside the flashcards
directory. The numbers are the counts of files in each of the folders.
Write a page called flashcards.js
that makes requests to flashcards.php
when its buttons are pressed.
The HTML page flashcards.html
has a next
button that should make a request to flashcards.php
every other time it is clicked. The flashcards.php
will send back data for a flashcard. Show only the question. When the next
button is pressed again, display the answer. The view all
button should request when pressed and then display a list of all the categories of flashcards available in the categories ul. When a category is clicked it should make all further times next
is clicked only select cards from the selected category.
Download the HTML and CSS files below (right-click, Save Target As...) to get started:
If you finish all the exercises, you can add any other content or code you like to your page.
If the lab is over or almost over, check with a TA and you may be able to be dismissed.
Great work!