❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Create a course-specific QuizRenderer component that integrates with ResourceLayout for practice quizzes and surveys within courses. This claims both the side panel (question navigation) and bottom bar (prev/next).

Complexity: Medium

Context

QuizRenderer handles exercise content with quiz or survey modality. Within courses, it needs to claim both ResourceLayout slots:

• Side panel: question list navigation
• Bottom bar: prev/next question navigation

The Change

Copy QuizRenderer:

• Copy kolibri/plugins/learn/frontend/views/QuizRenderer/ and subcomponents (index.vue, AnswerHistory.vue, QuizReport.vue)
• New location: kolibri/plugins/learn/frontend/views/Course/QuizRenderer/
• Existing implementation will eventually be replaced by this

Integrate with ResourceLayout:

• Claim side panel slot for question list navigation
• Claim bottom bar slot using the generic PrevNextBar component (from ResourceLayout updates)
• Use ResourceLayout's injection pattern for both slots

Question navigation UI:

• Side panel: list of questions with completion/answer status
• Bottom bar: PrevNextBar component with props for progress (e.g., "question 3/22") and events for navigation

Acceptance Criteria

General

• QuizRenderer and subcomponents copied to kolibri/plugins/learn/frontend/views/Course/QuizRenderer/
• Component renders practice quizzes (quiz modality) and surveys
• Integrated into CourseUnitView alongside ContentViewer and AssessmentWrapper (same conditional pattern as ContentPage.vue)

ResourceLayout Integration (quiz/survey mode only)

• Side panel claimed for question list navigation
• Bottom bar claimed using PrevNextBar component
• Both slots claimed via ResourceLayout's injection pattern
• Report mode renders WITHOUT ResourceLayout takeover (no side panel or bottom bar claiming)

Question Navigation

• Side panel displays question list with completion/answer status
• Bottom bar shows progress (e.g., "question 3/22")
• Prev/next navigation works correctly
• Submit button rendered via PrevNextBar's additional actions slot

Behavior

• Existing progress tracking handlers passed through
• Silent completion when quiz/survey finished (no modal)
• User advances to next resource via course navigation after completion

🤖 This issue was written with AI assistance, under supervision, review and final edits by [@rtibbles] 🤖