Quiz Renderer (QuizRen) Module

A Drupal 10+ module that automatically renders and displays quizzes generated by the Quiz Generator module with full MathJax support for mathematical expressions.

Overview

The QuizRen module automatically processes Quiz content type nodes and renders interactive quiz questions with mathematical notation support. When a Quiz node is viewed, the module fetches quiz data from an API endpoint, parses the content, and displays it in a user-friendly format.

Features

• Automatic Rendering: Quiz content renders automatically when Quiz nodes are viewed
• API Integration: Fetches quiz data from /api/v1/quiz/data endpoint
• MathJax v4 Support: Full support for LaTeX mathematical expressions
• Error Handling: Comprehensive error handling with graceful fallbacks
• Debug Logging: Console logging for troubleshooting
• Responsive Design: Clean, modern styling for quiz presentation

Requirements

• Drupal 10.2+ or Drupal 11+
• Quiz Generator (quizgen) module
• Modern web browser with JavaScript enabled

Installation

1. Place the module in web/modules/custom/quizren/
2. Enable the module: drush en quizren
3. Clear caches: drush cr

Usage

Automatic Quiz Rendering

The module automatically renders quizzes when Quiz content type nodes are viewed. Simply:

1. Create or view a Quiz node
2. Ensure there's a <div id="render"></div> element on the page
3. The quiz will automatically load and display

Manual Testing

Visit the test controller to debug quiz rendering:

/admin/config/quizren/test/[NODE_ID]

Replace [NODE_ID] with the ID of a Quiz node.

Architecture

Services

QuizApiService

• Purpose: Handles API communication with quiz data endpoint
• Methods:
  • fetchQuizData($nid): Retrieves quiz data from API
• Dependencies: HTTP client, logger, config factory

QuizParserService

• Purpose: Parses and validates quiz data from API responses
• Methods:
  • parseQuizData($api_data): Parses field_quiz_data JSON
  • processQuestion($question, $index): Validates individual questions
• Dependencies: Logger factory

JavaScript Components

quiz-renderer.js

• Purpose: Frontend quiz rendering and MathJax integration
• Key Functions:
  • fetchQuizData(): API communication
  • parseQuizData(): Client-side data parsing
  • renderQuiz(): HTML generation and DOM injection
  • processMathJax(): Mathematical expression rendering

mathjax-config.js

• Purpose: MathJax v4 configuration
• Features:
  • Inline math: \( and \) delimiters
  • Display math: \[ and \] delimiters
  • SVG rendering with global font cache

Data Structure

API Response Format

[
  {
    "nid": "80",
    "title": "Quiz Title",
    "field_quiz_data": "HTML-encoded JSON string"
  }
]

Quiz Data Structure

[
  {
    "question": "Question text with \\(LaTeX\\) expressions",
    "choices": [
      {
        "id": "c1",
        "text": "Choice text",
        "is_correct": true
      }
    ],
    "feedback": {
      "correct_feedback": "Correct answer explanation",
      "incorrect_feedback": "Incorrect answer explanation"
    }
  }
]

Configuration

MathJax Configuration

The module includes MathJax v4 with the following configuration:

• Inline Math: \( and \) delimiters
• Display Math: \[ and \] delimiters
• Rendering: SVG with global font cache
• Processing: Escapes and environments enabled

CSS Classes

• .quiz-container: Main quiz wrapper
• .quiz-question: Individual question container
• .quiz-choices: Choice list styling
• .quiz-feedback: Feedback section styling
• .quiz-error: Error message styling

Debugging

Console Logging

The module provides detailed console logging:

• API request/response data
• Parsing steps and results
• MathJax processing status
• Error messages and warnings

Common Issues

1. No quiz data: Check API endpoint availability
2. Math not rendering: Verify MathJax loading in browser console
3. Missing render div: Ensure <div id="render"></div> exists on page

Development

File Structure

quizren/
├── README.md
├── quizren.info.yml
├── quizren.module
├── quizren.services.yml
├── quizren.libraries.yml
├── quizren.routing.yml
├── src/
│   ├── Service/
│   │   ├── QuizApiService.php
│   │   └── QuizParserService.php
│   └── Controller/
│       └── QuizrenTestController.php
├── js/
│   ├── mathjax-config.js
│   └── quiz-renderer.js
└── css/
    └── quiz-renderer.css

Extending the Module

To customize quiz rendering:

1. Override CSS classes for styling
2. Extend JavaScript functions for custom behavior
3. Modify services for additional data processing

API Integration

Expected Endpoint

• URL: /api/v1/quiz/data
• Method: GET
• Parameters: nid (node ID)
• Response: JSON array with quiz node data

Error Handling

• HTTP request failures
• JSON parsing errors
• Missing or invalid data structures
• MathJax loading issues

License

This module is part of the Synth OER project and follows Drupal licensing standards.

Support

For issues and feature requests, please contact the development team or check the project documentation.