@arlinear/quiz-react v1.0.43

Arlinear Component Lib for React

Install dependencies

npm install

Start Self-Host Container

Follow the steps here: Arlinear Self Host, or self host with Supabase: Arlinear Self Host Supabase

Start dev

npm start

Example use cases

Student side

This page in your site is where the student would take the quiz and submit it, having their answers automatically graded and saved to the db.

Here's an example page that displays a quiz and handles the student's submission.

import React, { useState } from 'react';
import ArlinearQuiz from './components/ArlinearQuiz';
import QuizResultModal from './components/QuizResultModal';

function App() {
  const apiRoot = "http://localhost:54321/functions/v1/"; // Url to your self hosted Arlinear API. Set to null to use the default Arlinear API.
  const [quizKey, setQuizKey] = useState("ba777045-7033-4701-b17b-da9e90dcd41e"); // fetch this from your backend
  const primaryKey = "Jake"; // To have students entries saved, set this to some unique identifier.

  const [modalOpen, setIsModalOpen] = useState(false);
  const [finalGrade, setFinalGrade] = useState({});
  const [submissionId, setSubmissionId] = useState(null);
  
  /**
   * What do we want to do when user clicks "practice with new questions"? This could redirect to more of your quizzes
   * But here, we'll use the gen-more-questions endpoint to generate a new quiz for the user.
   */
  async function genNewQuiz() {
    await  \fetch(
      apiRoot + "/gen-more-questions",
      {
        method: 'POST',
        headers: {
          'Content-type': 'application/json',
        },
        body: JSON.stringify({submissionId: submissionId}),
      }
    )
      .then((response) => response.json())
      .then((data) => {
        setQuizKey(data.quizKey)
        setIsModalOpen(false);
      });
  }

  /**
   * User submits the quiz, and we get the submissionId back. We display the modal, and set the final grade.
   */
  function submit(data) {
    setSubmissionId(data.submissionId)
    setIsModalOpen(true);
    setFinalGrade({
      percentage: (data.mark / data.mark_out_of) * 100
    });
  }

  function reload() {
    window.location.reload();
  }

  return (
    <>
      <ArlinearQuiz quizKey={quizKey} key={quizKey} onSubmit={submit} primaryKey={primaryKey} apiRoot={apiRoot} questionsPerPageOverride={1} />
      <QuizResultModal modalOpen={modalOpen} onCloseModal={reload} finalGrade={finalGrade} onStartNewQuestions={genNewQuiz} />
    </>
  );
}

export default App;

Educator side

This page on your site is where an educator can review a student's submission. Here's an example page where you could view all of the students submissions:

function App() {
  const apiRoot = "http://localhost:54321/functions/v1/"; // Url to your self hosted Arlinear API. Set to null to use the default Arlinear API.
  const [quizKey, setQuizKey] = useState("ba777045-7033-4701-b17b-da9e90dcd41e"); // fetch this from your backend
  const primaryKey = "Jake"; // Students unique identifier.

  const [submissions, setSubmissions] = useState([]);

  /**
   * Fetch all the submissions for this quiz and student.
   */
  useEffect(() => {
    fetch(apiRoot + 'get-grades', {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify({
        'quizKey': quizKey,
        'primaryKey': primaryKey
      })
    }).then((response) => response.json())
      .then((data) => {
        setSubmissions(data);
      });
  }, [quizKey, primaryKey]);

  return (
    <>
      {submissions.map((submission) => (
        (<ArlinearQuiz quizKey={quizKey} key={quizKey} submission={submission} />)
      ))}
    </>
  );
}

export default App;