CSC/ECE 517 Spring 2026 - E2619. Student Quizzes Frontend

From Expertiza_Wiki
Jump to navigation Jump to search

E2619: Student Quizzes — Design Document

Introduction

Expertiza is an educational web application collaboratively developed and maintained by students and faculty at NCSU. As an open-source project built on the Ruby on Rails platform, its code is accessible on GitHub. The platform enables students to provide peer reviews and refine their work based on feedback.

This design document describes the implementation plan for the E2619 Student Quizzes project, covering both the frontend (React/TypeScript) and backend (Ruby on Rails API). The project builds on the E2607 questionnaire rendering code and extends it with quiz-specific capabilities: directing students to quizzes/reviews, scoring quiz responses, specifying correct answers, and handling fill-in-the-blank questions.

Project Overview

Quizzes in Expertiza are designed to ensure that reviewers comprehend the material they are evaluating. When an assignment includes quizzes (require_quiz = true), submitting teams create quizzes based on their submissions. Reviewers must complete the quizzes before reviewing to demonstrate their understanding. If a reviewer performs poorly, their review can be discounted to maintain quality.

Quizzes can also be used to test what students have learned from assigned readings on book chapters written for Expertiza assignments. In this case, the quiz-taker does not necessarily need to also review the submission.

Current State of the Codebase

The existing implementation provides:

  • Backend: Models for QuizQuestionnaire, QuizItem, QuizQuestionChoice, QuizResponseMap, Response, and Answer. Basic CRUD for questionnaires and questions exists. The ScorableHelper module calculates scores using answer * weight.
  • Frontend: Questionnaire editor (create/edit/delete), student task list, review tableau display, and assignment configuration. The questionnaire editor supports the "Quiz" type but does not support specifying correct answers for quiz items.

What Is Missing

Area Gap
Student Task View No mechanism to direct a student to a quiz, a review, or both based on the assignment configuration (require_quiz)
Quiz Scoring Response.aggregate_questionnaire_score performs answer * weight but does not check whether the answer is correct against QuizQuestionChoice.iscorrect
Correct Answer Specification The frontend QuestionnairesController / questionnaire editor has no UI to mark correct answers for quiz item types (Multiple Choice, Checkbox, TextField)
Fill-in-the-Blank (TextField) No support for multiple correct answers on a TextField quiz question
Quiz Taking Interface No student-facing page to take a quiz (render questions, collect answers, submit)
Quiz Assignment The assign_quiz route exists in routes.rb but the controller method is not implemented
Backend Endpoints Missing endpoints: submit quiz answers, fetch quiz for student, get quiz score

Design

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                     Frontend (React/TS)                     │
│                                                             │
│  StudentTasks ──→ QuizGateway ──→ QuizTaker ──→ QuizResult  │
│       │                              │                      │
│       └──→ ReviewForm                └──→ API Services      │
│                                                             │
│  QuestionnaireEditor ──→ QuizCorrectAnswerEditor            │
└──────────────────────────┬──────────────────────────────────┘
                           │ REST API
┌──────────────────────────┴──────────────────────────────────┐
│                     Backend (Rails API)                     │
│                                                             │
│  StudentQuizzesController  ←── QuizScoringService           │
│  QuestionnairesController  ←── QuizQuestionChoice model     │
│  StudentTasksController    ←── StudentTask model            │
│  Response model            ←── ScorableHelper (enhanced)    │
└─────────────────────────────────────────────────────────────┘

Key Features

1) Student Task View — Quiz/Review Gateway

Problem: Students currently see their assigned tasks but have no way to be directed to a quiz, a review, or both.

Solution: Enhance StudentTasksController and the frontend StudentTasks page to determine what action a student needs to perform based on the assignment configuration:

  • If assignment.require_quiz == true and the student has not yet taken the quiz for a submission → show "Take Quiz" action
  • If the student has taken the quiz (or quiz is not required) → show "Write Review" action
  • If both are required and the quiz is completed → show "Write Review" action

2) Quiz Scoring Logic

Problem: The current scoring in Response#aggregate_questionnaire_score multiplies answer * weight for all items. For quiz questionnaires, it should check whether the student's answer is correct (1 point) or incorrect (0 points).

Solution: Enhance the Response model's scoring to detect QuizQuestionnaire type and score differently.

3) Specifying Correct Answers in the Questionnaire Editor (Frontend)

Problem: When creating a Quiz questionnaire, the instructor needs a way to mark which answers are correct. For TextField items (fill-in-the-blank), the instructor needs to specify multiple acceptable correct answers.

Solution: Extend the QuestionnaireItemsFieldArray component to render answer-choice editors when the questionnaire type is "Quiz".

4) Student Quiz-Taking Controller (Backend)

Problem: There is no endpoint for students to fetch a quiz, submit answers, or view their score.

Solution: Create a new StudentQuizzesController with the following actions: 

GET    /student_quizzes                          → index (all quizzes assigned to current user)
GET    /student_quizzes/:id                      → show (fetch quiz with questions for taking)
POST   /student_quizzes/assign                   → assign_quiz (instructor assigns quiz to student)
POST   /student_quizzes/submit_answers           → submit_quiz (student submits quiz answers)
GET    /student_quizzes/:id/score                → view_score (student views their quiz score)

5) Quiz-Taking Interface (Frontend)

Problem: There is no student-facing page where a student can take a quiz.

Solution: Create a QuizTaker page component.

QuizTaker Flow: 

1. Student clicks "Take Quiz" from StudentTasks
2. Frontend fetches GET /student_quizzes/:id (quiz items without correct answers)
3. Student fills in answers for each question
4. Student clicks "Submit"
5. Frontend sends POST /student_quizzes/submit_answers
6. Backend scores answers via QuizScoringService
7. Frontend receives score and displays QuizResult

UML Design

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2026_-_E2619._Student_Quizzes_Frontend&oldid=167820"