Global

Members

(constant) SettingsFormView

Pure presentational component that renders the quiz settings form. Does not depend on the global store.

Source:

(constant) consentAwareStorage

Custom storage engine that checks for GDPR consent before writing to localStorage.

Source:

(constant) consentAwareStorage

Custom storage engine that checks for GDPR consent before writing to localStorage. Reads from localStorage regardless of consent to load saved settings, but only writes new settings if the user has accepted cookies.

Source:

(constant) useQuiz

Custom hook to manage the quiz state and logic. Handles question fetching, scoring, user answers, and quiz progression.

Properties:
Name Type Description
status string

Current status of the quiz ('ready', 'active', 'finished')
currentQuestion Object

The currently displayed question object
totalQuestions number

Total number of questions in the current session
score number

Current calculated score (only available when finished)
currentIndex number

Index of the current question
startQuiz function

Function to initialize and start the quiz based on settings
answerQuestion function

Function to handle user answer submission
restartQuiz function

Function to reset the quiz to 'ready' state
Source:

(constant) useResultsStore :function

Hook to access the results store.

Type:
  • function
Source:

(constant) useSettingsStore :function

Hook to access the settings store.

Type:
  • function
Source:

Methods

Button()

Reusable Button component for user interactions.

Source:
Example
```jsx
<Button onClick={() => console.log('clicked')}>Click Me</Button>
<Button disabled>Disabled Button</Button>
```

CookieBanner()

GDPR-compliant cookie consent banner Displays information about LocalStorage usage for educational purposes

Source:

CookieSettings()

Cookie Settings component for managing user consent preferences.

Allows users to:

  • View current cookie consent status (Accepted/Rejected/Not Set)
  • Accept cookies to enable LocalStorage
  • Reject cookies and clear all stored data
  • View information about what data is stored
  • Access Privacy Policy

Features:

  • Visual status indicators with color coding
  • Confirmation dialog before data deletion
  • Automatic page reload after consent changes
  • Links to Privacy Policy documentation
Source:
Example
```jsx
<Route path="/cookie-settings" element={<CookieSettings />} />
```

Transparent header component with navigation links.

Displays a fixed header at the top of the page with:

  • Logo/home link
  • Documentation link (external)
  • Cookie Settings link (internal route)

Features glassmorphism effect with backdrop blur and semi-transparent background.

Source:
Example
```jsx
<Header />
```

SettingsForm() → {JSX.Element}

Connected container component for Quiz Settings. Connects SettingsFormView to the Zustand store.

Source:
Returns:

The connected settings form

Type
JSX.Element

addResult(username, newResult)

Adds a new quiz result for a user.

Parameters:
Name Type Description
username string

The username
newResult Object

The result object to add
Source:

clearUserResults(username)

Clears all results for a specific user.

Parameters:
Name Type Description
username string

The username to clear results for
Source:

setSettings(newSettings)

Updates the quiz settings.

Parameters:
Name Type Description
newSettings Object

Object containing new settings to merge
Source:

Type Definitions

ResultsStore

Zustand store for managing quiz results. Persists results to localStorage if consent is given.

Type:
  • Object
Properties:
Name Type Description
resultsByUser Object.<string, Array>

Map of usernames to their result history
addResult function

Adds a new result for a user
clearUserResults function

Clears results for a specific user
Source:

SettingsStore

Zustand store for managing quiz settings. Persists data to localStorage using the 'quiz-settings' key.

Type:
  • Object
Properties:
Name Type Description
numQuestions string

Number of questions to fetch (e.g., '5', '10', '15')
difficulty string

Difficulty level of the questions ('easy', 'medium', 'hard')
setSettings function

Function to update quiz settings
Source: