Displaying Academic Content on Screen

Owned by Jennifer Bessette (Unlicensed)
Last updated: Jul 29, 2019
4 min read

We need to display the academic lesson content on screen for ease of use and to allow a screen reader to read the information. Currently, this information is displayed as PDFs. The information will exist in a tabbed format, and no edits will be allowed at this time.

General Concept

Design

  • When an academic lesson is selected on the Learning Plan, the Lesson Plan section will no longer display the downloadable documents, but instead show 5 tabs:
    • Intro
    • Instruction
    • Practice
    • Assessment
    • Materials
  • The section the user is currently viewing (i.e. Intro) will be displayed in colored font and underlined to show that the user is currently on this tab.
  • Users will have the option to print each tab. Clicking print will open the existing PDF for that lesson.

Business Rules

  • All users with permission to view the learning plan will see this content
  • We will not allow any edits
  • By default, we will show Intro as selected & display the relevant content on the screen

Intro

Design

  • We will display bold green headings for:
    • Focus Question
    • Goal
    • Objectives
      • We will show numbered objectives below
  • We will display slightly smaller blue headings for:
    • Vocabulary
    • Variations
    • Beyond the Lesson
  • At the bottom of the screen, we will show Next, Instruction.
    • Clicking this will advance the user to the Instruction tab.

Business Rules

  • Users will not be able to make any edits

Instruction, Practice, and Assessment

Design

  • Materials
    • Green Bold text for the heading
    • Bullet points below

  • Time
    • Green bold text for heading
    • Time listed below

  • Ready, Set, Learn!
    • Smaller blue text for heading
    • This section is tabbed in with a blue line

  • Procedure
    • Green bold text for heading
    • Numbered list below

  • Guiding Questions
    • Smaller blue text for heading
    • Bulleted list

  • Helpful Hints
    • Smaller blue text for heading
    • This section is tabbed in with a blue line

  • Bonus Activity
    • Smaller blue text for heading
    • This section is tabbed in with a blue line

  • Accommodations/Modifications
    • Green bold text for heading
    • Level 1, 2, and 3 in smaller italicized green font

  • Proficient Plus
    • Smaller blue text for heading
    • This section is tabbed in with a blue line

  • Suggested Rubric (Assessment tab only)
    • Green bold text for heading
    • Rubric is bulleted list by Exceeding Standard, Meeting Standard, Approaching Standard, and Developing Standard

  • Back Navigation
    • Will display as Previous, INSERT PREVIOUS TAB HEADING
    • Clicking this will take the user to the tab listed before the one selected. For example, if the user is on Instruction, the back button will take the user to Intro.
  • Forward Navigation
    • Will display as Next, INSERT NEXT TAB HEADING
    • Clicking this will take the user to the tab listed after the one selected. For example, if the user is on Instruction, the next button will take the user to Practice.

Business Rules

  • Users will not be able to make any edits
  • Suggested Rubric section will only show on the Assessments tab

Materials

Design

  • We will show a bold green heading for Materials
  • Materials will show in an ordered list below
  • In addition to the materials currently shown on the Materials PDF, we need to show all PDFs for the Intro, Instruction, Practice, and Assessment screens (PDFs that currently print when the user clicks on one of those sections on current site).
  • Materials will be listed as Download the INSERT NAME OF MATERIAL PDF
  • Clicking on a material will open the PDF of that material
  • We will show a back navigation as Previous, Assessment
    • Clicking this will take the user to the Assessment Tab

Business Rules

  • Users will not be allowed to make any edits.