Class Activity 5

Instructions

Step 1: Adding quiz questions to VidQuiz

Make a folder in your or your pair's repository called ca5 if you haven't already and copy your latest VidQuiz file(s) there, or use my solutions (link will be forthcoming). Update the page as follows:

• when a user is in the VidQuiz view and the "edit mode" is active:
  • an "add question" button should appear
  • a list of existing questions should also appear along with their timestamps
  • if the "add question" button or an existing question is clicked, its details will appear and should be editable
    • the question type should be a choice: multiple choice or free response
      • if free response, an input text area should be displayed for the question text, but nothing more
      • if multiple choice, an input text area should be displayed, as well as the option to add choices
        • each choice should have a text box for the choice text and a way to indicate if it's a correct answer or not
        • each choice should be removable
    • the timestamp should be populate with either the current time of the video (if "add question" was clicked), or the time associated with a question (if a question was clicked—this should also move the video to that timestamp)
    • there should be an option to save, cancel, or remove the question
• when a user is in the VidQuiz view and the "play mode" is active:
  • the questions should appear below the video when its timestamp is reached as the video is playing
    • for free text responses, the question should be displayed and a text area below it where the user can enter their response
    • for multiple choice questions, the options should be listed with checkboxes (so more than one can be selected)
  • it should pause the video and not allow the user to continue until the question is submitted (via a "Submit" button)
    • if it's a multiple choice question, the user should be shown the correct answers; they then must click "Continue" to resume playing the video

Here are example wireframes for these views:

Step 2: Submitting

Stop wherever you are at the end of 40 minutes. Add a README.md file with the following information:

• who you worked with (say "I worked alone" if you didn't have a partner)
• how long you spent on the assignment
• what the most challenging aspects were
• any lingering questions you have about the assignment

You will need to include a similar README.md file for all of your assignments (see this video for details Links to an external site.). Commit your work, push it to GitHub, and then submit a link to your folder for this assignment on GitHub.

Programming assignment options

PA5.1: Add support for question feedback

Copy your completed ca5 folder to a new folder pas/pa5.1. Update VidQuiz so that:

• in edit mode:
  • when editing a question, feedback can be provided
    • for free response questions, this should be an extra text area below the question box, hidden by default if it's empty (there should be a toggle button to show/hide it)
    • for multiple choice, this should be a text area for each answer option (there should be a toggle to show/hide it)
• in play mode
  • when the user answers a questions and clicks "Submit", if there is any feedback associated with that question, it should be displayed
    • for multiple choice questions, these should appear just under each answer option in the results (see the last screenshot in Class Activity 5)
    • for free response questions, both the question and the feedback should be displayed; the user must click "continue" in order to stop showing the question and resume video play

Here's the rubric:

[ ] meets the criteria of Class Activity 5
[ ] users can add feedback on free response questions in edit mode
[ ] users can see feedback on free response questions after answering the question in play mode
[ ] the viewer has to click a "continue" button in order to resume playback after seeing feedback for a free response quesiton
[ ] no feedback screen is shown after free response questions in play mode if there is no feedback
[ ] users can add feedback on each answer option in multiple choice questions in edit mode
[ ] users can see feedback on each multiple choice question in play mode
[ ] the code is well commented and styled
[ ] there is a header at the top of the file that includes the name of the author(s) and a brief description of the file
[ ] the PA folder includes a README.md file with the required information in it

Submitting PAs

Be sure to create a README.md with the following information:

• who you worked with (say "I worked alone" if you didn't have a partner)
• how long you spent on the assignment
• the PA option (and, if applicable, the earlier PA option it builds off of; see this video for details Links to an external site.)
• a copy of the PA option's rubric, filled out (only submit if you can honestly check off each of the criteria)
• what the most challenging aspects were
• any lingering questions you have about the assignment