JQuery Lab #1: The Reading Improvement Project
- A Word at a Time -

Preface

The purpose of this page is for you (Mr. M's student) to expand upon this template to provide additional functionality.
You should use the JQuery API and the Internet, in general, for assistance.

Click the button above to run the program.

Part 1: Style

  1. Create a new file called jql1_1.htm in your server space in a new folder called 'jquery'
  2. Include the 4 files in the HEAD section so you have JQuery/Bootstrap loaded
  3. Create a form that asks the user for a block of text (use a textarea), a background color (select with the #XXXXXX as the value and color name as the text displayed), a text color (same setup as the bgcolor), and a font size (input type='number')
  4. When the user makes selections and hits the 'Run Reading Program' button, it should display a DIV that shows the text one word at a time with the style settings as chosen by the user.
You are to use JQUERY for making all applicables updates. (Setting the text of the DIV, the css, etc.)
Some Hints:
  • $('#timedTextDisplayDiv').html($('#desiredText').val())
  • $('#timedTextDisplayDiv').css(....)

    • Part 2: Function

    1. Save the previous part as jql1_2.htm
    2. Add to your form a Word Speed input (type='range')
      SLOW
      FAST
    3. Add BELOW your form a section for reading 'controls' for the following components:
      • Pause Button
      • Play Button
      • Back Button (Go back 10 words)
      • Rewind Button (Go back to the start of the current sentence)
      • Restart Button (Replay the whole story)
      Use Glyphicons for Pause/Play/Back/Rewind/Restart
      Example: for restart.
      NOTE: If Glyphicons do NOT show up on your website, change your 4 lines at the top to what I have in the HEAD section here. (There may be an issue with your local versions.)
    4. WRITE THE FUNCTIONALITY so that your 5 buttons do their job.
      This is not 'very easy'. Think about how to go back 10 words (OK, that is easy :p), then how to restart a sentence (think about this one), and then restart (OK, this is easy too.) The pause button is pretty basic.
    5. For the BUTTONS above, ONLY the PLAY button should make it play after any of the other buttons are pressed.(In other words, if pressing REWIND, it should go back to the start of the current sentence and 'stop' (pause).
    6. Write this code as separate functions in the HEAD section and add those function calls to an ONCLICK attribute for each glyphicon.

    Part 3: Progress Bar

    1. Save the previous part as jql1_3.htm
    2. Use this tutorial to add a progress bar at the TOP of your page that accurately shows the percentage of reading completed
    3. Ensure that this progress bar works CORRECTLY when someone uses any of the CONTROL BUTTONS added in Part 2

    Part 4: Keywords

    1. Save the previous part as jql1_4.htm
    2. Create a JS file with function called 'loadBook()' that RETURNS this story: Black Cat by Poe
      (You can either just 'take' (copy) the text OR write a JQuery function that loads it from the server)
    3. (Start by only copying the first paragraph and test your program to make sure it works)
    4. UPDATE your form to include an input (text) that ask for a keyword to search the document for.
    5. Make it so that when a word is entered and a SEARCH BUTTON (add this) is clicked, create a DIV at the BOTTOM of the page that shows EACH SENTENCE containing that word

    Part 5: Creative Juices

    1. Save the previous part as jql1_5.htm
    2. THINK of some additional functionality that would improve this product. RUN IT BY Mr. Merlis, then, upon approval, build it.

    GRADING - 100 pts