Quiz Activity
- Mary DelPiano
Overview
The student center’s new quiz module engages learners with a visually appealing leading page, complete with motivational elements and important quiz details. A real-time progress bar enhances the experience by illustrating their journey through the questions. Students navigate using intuitive controls, with question cards dynamically adjusting for content, ensuring a focused and adaptive assessment environment. Upon completion and review, students are smoothly transitioned back to the assignments page.
User Story
As a RethinkEd student, I need a way to easily navigate to and complete quizzes in the Student Center, so that I can engage with assigned material and submit my work directly within RethinkEd.
Figma
Epic
Feature 193777: Student Center
UI Description
Sidebar Layout:
The sidebar includes a back navigation link, a lesson title with a long title option.
A collapse functionality to minimize the sidebar and provide more space for the quiz player.
Leading Page:
The quiz starts with a leading page that includes:
The total number of questions.
An engaging motivational graphic before beginning the quiz.
A motivational message to engage the student.
Start Quiz button
Quiz Cards:
Description: Quiz cards display the question/prompt and the answer choice options. Some question prompts may also include an image.
Default quiz card size on full screen (side bar collapsed) is 50% viewport width.
Quiz question cards sizes will be different:
Questions without an image will display text only
Larger container width for question card for questions with accompanying images and long prompt and answer choice text.
Each question card shows the question number (e.g., 4/45) and a progress bar below the question card, filling incrementally as questions are completed.
A volume icon for text-to-speech functionality accompanies each question https://rethinkautism.atlassian.net/l/cp/ug3j6X0T .
Back and Next arrow navigation buttons are consistently positioned on each side of the quiz card.
Multiple Select Questions/Responses: Responses display a checkbox to the left of the response text. The checkbox is selected to select a response. The checkbox is deselected to keep a response deselected. https://www.figma.com/design/2P8kwFEVvVNOVzG4D2E5Sj/Student-UI?node-id=398-3654&t=SgsKFtRsXftMBBRl-1
Quiz Navigation:
Back and Next arrow navigation buttons are consistently positioned on each side of the quiz card.
User selects ‘Back’ in top left corner above assignment title to close the quiz activity and return to the Student Center Assignment page.
Progress Tracking:
Description: A visible progress bar at the bottom of the page indicates the student's advancement through the quiz.
0% is represented by an empty bar
100% is represented by a filled orange bar.
Review and Completion:
Upon completion, the ‘Ready to Submit?’ screen will have ‘Back’ button and ‘Submit’ button.
‘Back’ button allows the user to view the quiz questions and change their responses before submitting the quiz.
‘Submit’ button submits the assignment to the Educator and the ‘Activity Complete’ screen displays to the user with the discussion panel.
Upon submitting the assignment, if a review is present, the Activity Complete screen will have ‘Skip Review button and ‘Start Review’ button and display the discussion panel.
Skip Review button closes the activity and navigates user to the Assignment page of the Student Center
‘Start Review' button displays the post-quiz review that displays the correct/incorrect answers, student responses, and explanations (if included). The discussion panel will also be displayed.
Upon submitting the assignment if no review is present, ‘Activity Complete’ screen with the 'Close' button and discussion panel should be clearly displayed and, when clicked, take the student back to the assignments page.
The student should be able to open the assignment in the ‘Done’ Assignments tab to view their questions with their submitted responses. This view will not display the quiz review with the incorrect/correct labels and responses. The discussion panel will display.
User Interaction and Validation Notes
Sidebar Functionality:
Users can collapse the sidebar to focus solely on the quiz content, with the ability to expand it back when needed.
Back navigation can be selected for navigation when the sidebar is collapsed.
Progress Tracking:
As students answer questions, the progress bar should fill incrementally.
The progress bar should accurately reflect the number of questions answered over the total number of questions.
Each question card shows the question number (e.g., 4/45).
Navigation Buttons:
Next/Forward arrow button on the right side of the question card takes the student to the subsequent question or review page.
Back arrow button allows students to return to previous questions for review before submission.
The 'Back' arrow button is hidden on the first question
User selects ‘Back’ in top left corner above assignment title to close the quiz activity and return to the Student Center Assignment page.
If the student has started the assignment, the assignment card will have an “In-Progress” chip in the bottom right corner.
Adaptive Question Cards:
The quiz platform should automatically adjust the size of the question cards based on content.
Images should be optimally sized and maintain aspect ratio within larger question cards.
Text to Speech:
The text to speech (volume) icon displays in the top right corner of the quiz cards.
The text-to-speech button will read the question aloud to the user.
Upon user selecting an answer choice for a multiple choice or multiple select question item, each answer choice should be converted into speech and played clearly.
All existing functionality for Text to Speech implemented with the SEL Self-Assessment will be utilized for the SEL quizzes (SEL, Wellness, Life Skills and Wellness) and Mental Health Quizzes. https://rethinkautism.atlassian.net/l/cp/ug3j6X0T
End of Quiz Workflow:
Upon completion, the ‘Ready to Submit?’ screen will have ‘Back’ button and ‘Submit’ button.
‘Back’ button allows the user to view the quiz questions and change their responses before submitting the quiz.
‘Submit’ button submits the assignment to the Educator and the ‘Activity Complete’ screen displays to the user with the discussion panel.
Upon submitting the assignment, if a review is present, the Activity Complete screen will have ‘Skip Review button and ‘Start Review’ button.
Skip Review button closes the activity and navigates user to the Assignment page of the Student Center
‘Start Review' button displays the post-quiz review that displays the correct/incorrect answers, student responses, and explanations (if included). The discussion panel displays.
Upon submitting the assignment if no review is present, ‘Activity Complete’ screen with the 'Close' button and discussion panel should be clearly displayed and, when clicked, take the student back to the assignments page.
The student should be able to open the assignment in the ‘Done’ Assignments tab to view their questions with their submitted responses. This view will not display the quiz review with the incorrect/correct labels and responses. The discussion panel will display.
Workflow Description
Quiz Initiation:
Student selects the quiz from the assignments page.
They are presented with the leading page that outlines the quiz details.
Quiz Engagement:
Upon starting the quiz, students encounter questions with or without images.
They navigate through questions using back and forward navigation arrows on each side of the question cards.
Progress Monitoring:
The progress bar fills as the student advances through the quiz.
The student can see at a glance how many questions have been answered by viewing the count in the top left corner of the question card.
Quiz Review/Completion:
After the last question, students are either directed to the review section via next/forward arrow or to close the quiz via 'Close' button.
In the review section, students can view the results of their quiz answer choice responses.
Quiz Exit:
Post-completion or post-review, students exit the quiz and are taken back to the assignments page.
Analytics and Feedback:
The system logs quiz interactions for potential analytics and feedback.
Any issues encountered during the quiz are reported for system improvements.