Quezzio Renderer

A React component library to simplify and standardize the rendering of Quezzio and WPG questions.

Features

• View-only rendering of Quezzio and WPG questions
• Modular and easy-to-integrate components

Installation

npm install @wolframtc/quezziorenderer

How to Use

1. Render Quezzio Questions

// Import the component and the styles file
import { QuestionList } from '@wolframtc/quezziorenderer';
import "@wolframtc/quezziorenderer/dist/index.css";

// Define the url of the s3 bucket where the question, answer, solution step files are stored
const url = "https://s3-bucket-link";

// Fetch the list of quezzio questions from api
// Note: `ListQuezzioQuestionApi` is not part of this package and must be implemented separately
const dataFromAPI = await ListQuezzioQuestionApi();

// This component renders the questions in the frontend
<QuestionList url={url} questionData={dataFromAPI} />

Props

| Prop | Type | Default | Description | |----------------------|----------|---------|-----------------------------------------------------------------------------| | questionData | any | – | Required.Response from the ListQuestion API (Quezzio). | | url | string | – | Required. Base URL to fetch question, answer, and solution HTML files. | | showTagToggle | boolean| false | Toggle to show/hide tags. | | showUsccsToggle | boolean| false | Toggle to show/hide USCCS metadata. | | showUuidToggle | boolean| false | Toggle to show/hide UUID. | | showSubjectToggle | boolean| false | Toggle to show/hide subject info. | | showAllMetadata | boolean| false | Show all metadata fields. | | showOnlyMetadata | boolean| false | Show only metadata. | | showOnlyUsccs | boolean| false | Show only USCCS-related metadata. | | showOnlyUuid | boolean| false | Show only UUID field. | | showOnlyTag | boolean| false | Show only tags. | | showOnlySubject | boolean| false | Show only subject field.

Example Output

Below is an example of how Quezzio questions are rendered when fetched using this package:

2. Render WPG Questions

// Import the component and the styles file
import { QuestionListWPG } from '@wolframtc/quezziorenderer';
import "@wolframtc/quezziorenderer/dist/index.css";

// Fetch the list of wpg questions from the api
// Note: `ListWPGQuestionApi` is not part of this package and must be implemented separately
const dataFromAPI = await ListWPGQuestionApi();

// This component renders the questions in the frontend
<QuestionListWPG questionData={dataFromAPI} />

Props

| Prop | Type | Default | Description | |----------------|----------|---------|----------------------------------------------------------------------------| | questionData | any | – | Required. Response from the ListQuestionWPG API (WPG). |

Example Output

Below is an example of how WPG questions are rendered when fetched using this package:

NOTE

If the styles of the components are coming differently then try cleaning out the main css files in your project as they might be affecting the appearance of the components.