Summary screen for Interactive Book - implementation


Acceptance criteria

  1. The user should be able to control when he or she submits her answers to any gradebook or reporting feature

  2. The user should be able to see how many questions of how many in total are answered before submitting

  3. The user should get a visual indication that all pages are done

  4. The user should see the progress (scoring per page)

  5. The summary page is always available but is highlighted differently when all pages are done. It lists all questions (answered and unanswered), lists a score for answered and has a submit button. Also lists page numbers and titles and when clicked the user is taken to them

  6. The user should get a motivating confirmation after pushing the submit button

  7. Implement the design as described below


Folow comments here to review the design. Below are the design details:

  • Add a button Summary & Submit

  • Get the latest font file

  • Icon: e90f

  • Button: Summary & Submit

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 NORMAL STATE: border: 1px solid #0cc9a7; border-radius: 2px; background-color: #ffffff; font-size: 1em; color: #0d736e; font-weight: 700; HOVER STATE: background-color: #f1f9f8 // + Animation as shown in the design (arrow fade-in from left) arrow icon #e909, icon rotate: rotate(90deg); ACTIVE STATE: box-shadow: 0px 0px 10px rgba(12,201,167,1); DISABLED STATE (same as NORMAL +): opacity: 0.5;
  • Summary & Submit button appears when at least one question is answered. If there are no questions in Interactive Book or if no questions are answered this button will not display

When all pages are marked as DONE

  • Desktop

    • The menu will open putting Summary & Submit button in focus

  • Mobile breakpoint

    • In addition to having a Summary & Submit button always available in the left menu - the button pops-up on the bottom. Click link and then click "show when all is done" to demonstrate animation how the button should pop up from the bottom.

When you click Submit button

  • Summay page opens

  • Summary & Submit button is in disabled state

  • Summary & Submit button is again in normal state when you leave Summay page

Summary page

  • 2 Progress bars at the top Book progress and Interactions progress

  • Book progress shows how many pages are marked as done

  • Interactions progress shows how many interactions are completed

  • 2 buttons below Submit Report and Restart

  • Submit Report button style:

    1 2 3 4 5 6 7 NORMAL: background-color: #0cc9a7; border-radius: 4px; color: #ffffff; HOVER: background-color: #0bb09d;
  • Restart button style:

    1 2 3 4 5 6 7 8 NORMAL: background-color: #ffffff; border-radius: 4px; color: #757575; border-color: #eaeaea HOVER: background-color: #f5f5f5;
  • Submit Report button will:

    • Submit a report

    • Show a confimation message. Click on a button in desigh to get a styling for submit message

  • Restart button will restart Interactive Book (mark all pages as unread, restart all activitites, close the summary page and show the starting page, or cover if exists )

  • Summary is shown below buttons

  • Filter for showing All interactions or Unanswered interactions. All is the default

  • In a summary we list:

    • Page title

    • On the right we display empty circle if not done or full if done (same as in the left menu )

    • Below the name we diplay No interactions or x of y interactions completed

    • Below we display a list of all interactions within each page

    • Before each interaction (same as for the pages) we display empty circle if not completed or full if completed

    • On the right we show score for each interaction or "-" if the interaction is not completed

    • Click on a page should close the Summary page and open that page

    • Click on interaction name should close the Summary page and position us on that interaction

    • Below the list of pages we display total score

  • If "No progress indicators" option is ON

    • we drop both circles (page indicators and question indicators)

    • we drop both progress indicators at the top

  • Summary page should count into page counter at the top and you should be able to access it as a last page when using < > top navigation

  • As writtern above, Summary&Submit button should be hidden if there are no questions in the book or if no questions are answered. In this case Summary page should be hidden too.

  • Mobile view for the Summary page (Click menu/summary & submit)

Acceptance Criteria






Jelena Milinovic



Code reviewer