Quiz App for Svelte and React Apps

Build interactive quiz application with the help of this app created for React and Svelte codebases. Create predefined questions to easily set up new technical interviews, challenges, or games, and automatically evaluate your candidates’ performance based on their answers.

This application comes with the following functionalities:

• Multiple framework support: The package includes code for the <Quiz /> app written in Svelte and React, meaning you’ll get two different implementation with this product.
• Configurable: Pass your questions, time limit, or translations to your <Quiz /> component through props to configure the application:

// Import the relevant component
import { Quiz } from '@components/Quiz.tsx'
import Quiz from '@components/Quiz.svelte'

// Call the component with the following props
<Quiz
    title="Advanced concepts in React"
    icon="react"
    availableTime={20}
    labels="upper-alpha"
    questions={[{
        question: 'Your question',
        answers: ['Answer #1', 'Answer #2', 'Answer #3'],
        correctAnswer: 2,
        hint: 'Optionally add a hint'
    }, { ... }]}

    // Possible translations:
    questionLabel="Question {0} of {1}"
    progressLabel="Progress"
    hintLabel="Show Hint ->"
    exitButtonLabel="Exit Quiz"
/>

Functionality

• Automatic progress tracking: Automatically track progress within the quiz with a progress bar.
• Time limits: You can optionally set a timer to limit how many minutes people can spend on the quiz. If the availableTime prop is not passed, the quiz will not have a time limit.
• Hints: Attach hints to questions if you want to give a helping hand to your users. Hints are hidden by default, and can be toggled.

Code Quality

• Responsive design: The layout of the app is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the application, making it easy to change your color theme, font sizes, or spacing. All icons present in the design are included.
  • Multiple themes: The app also comes with three different predesigned themes for more customization options.
• Cross-browser compatible: The app was tested on major browsers (Chrome, Firefox, Edge) to ensure cross-browser compatibility.