Basic Elements

Landing Page

Landing pages provide space for a large image, introduction text, and buttons to Login or Create an Account. When either button is selected, it triggers a screen for the user to either login or create their account.

Buttons for "Login" and "Create an Account"
Button reading "Login with my Penn State Account" and a small form to login via email and options for password retrieval and account creation.

Logging in creates a User Account, viable for all courses available on the same instance of Builder. After logging in, users can select "Join" to enroll in the specific course.

Landing page of Global Careers Institute Orientation module.

Dashboard

Users can visit their Dashboard at anytime. The Dashboard provides access to their User Profile, completion certificates, and shows the progress for enrolled courses.

Builder Dashboard with one course.

When a user enrolls in more than one course on the same site, they can view all course progress and completion on the Dashboard. The Dashboard is also the location for users to download their own responses to reflection questions and other assessments.

Dashboard for a site with multiple courses, completed courses, and option to download answers.

User Profile

Users can edit their own profile information.

User Profile with fields for first and last name, email, new password and current password, plus Save Profile button.

Course Navigation

Users move through the course efficiently using multiple methods of navigation.

  • Main Nav

    Compared to their website counterparts, courses have simplified main navigation menus that include links to main sections of the course along with Dashboard and Support Buttons. Additional links are optional.

  • Side Nav

    The side nav may resemble the main nav, but appears alongside the course content when viewed on a larger screen. Side navs display all top level pages and expand like accordions to show nested pages. Open circles and check marks indicate which pages are required and which pages the user has completed.

  • Next / Back Buttons

    At the bottom of most course pages reside two buttons for back and forward movement through the course.

Main Navigation and Side Navigation for a Course.

Course Progress

Indicators help users be aware of their progress through the course. Courses have progress bars at the top and bottom of each course page; the gray bar fills in with a gradient of blue-green as users progress through the course. The Dashboard, too, gives the status of the course progress.

Gate-Keeping

To track a student's progress through a course, the pages must use "gatekeeping." You can apply gatekeeping at the course level and manually toggle gatekeeping at the page level. Gatekeeping not only tracks student progress, but restricts their initial movement through the course to the linear order of pages. To allow unfettered access to certain pages, like support info, bibliographies, or glossaries, you can toggle off gatekeeping. A course is not considered "complete" until the user visits all pages with gatekeeping and passes all assessments.

Check marks display on the side nav to indicate which pages have been visited.

    Course page with top and bottom progress bars, as well as, check marks in the side nav indicated.

    Assessments

      Construct different types of assessments and surveys using a mix of question types, feedback options, and submission options.

      Question Types

      • Answer Selection

        Select one answer from a list of options.

      • Essay

        Respond with text that meets the character requirement, if set.

      • Likert Scale

        Make selections from a custom-defined scale or set of options.

      Answer Selection Questions

      Answer selection quiz titled "Module 2 Self-Check" with two true or false questions and a Submit button.

      Quizzes can include default or custom feedback for each question. Set a percentage necessary to pass the quiz or opt for a survey where any response is accepted.

      Answer selection quiz titled "Module 2 Self-Check" with feedback indicating one correct and one incorrect answer, resulting in a failed attempt.

      Reflection Questions

      Optionally, establish a character minimum and review submissions manually before approving continuing education credits.

      A one-question quiz with the title "Reflection," a large text box with a character limit.

      Combination

      Assessments can combine answer selection and reflection questions.

      A quiz with some reflection style questions with character limits and an answer selection question.

      Survey

      Surveys do not have right and wrong answers, but can promote learner reflection and introspection or assist in data collection for other purposes. In addition to answer selection and reflection questions, surveys can include a question type based on a Likert Scale. Define the number and values of each answer option, then create as many items as needed.

      A quiz with several questions. Beneath each question are the same options: Teacher, Student, or Both.

      Certificates

      When learners complete a course, they're presented with an animated burst of confetti and a certificate which they can download and save or print.

        Final page of course with confetti animation on screen. Overlaying arrows indicate three locations where a student can access their certificate of completion.

        Builder will generate the certificate automatically upon course completion. Courses may use a default certificate or design a custom certificate that can incorporate signatures and logos.

        Certificate of Completion for Example Student with Penn State logo, authorized signature, date, and course name.
        Certificate for Teaching Difficult Issues that has different styling than other certificate.