# @arlinear/quiz-react

> `npm install`

Latest version **1.0.43** (published 2023-10-25) · 0 weekly downloads

## Install

```sh
npm install @arlinear/quiz-react
pnpm add @arlinear/quiz-react
yarn add @arlinear/quiz-react
bun add @arlinear/quiz-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.43 |
| Published | 2023-10-25 |
| First published | 2023-07-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 163.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | malek-frog, liammaclean216 |

## Links

- npm: https://www.npmjs.com/package/@arlinear/quiz-react
- npm.io page: https://npm.io/package/@arlinear/quiz-react

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-cookie](https://npm.io/package/react-cookie.md) ^5.0.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [react-latex-next](https://npm.io/package/react-latex-next.md) ^2.2.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 1.0.43 (latest) — 2023-10-25
- 1.0.42 — 2023-10-25
- 1.0.41 — 2023-10-25
- 1.0.40 — 2023-10-25
- 1.0.39 — 2023-10-25
- 1.0.38 — 2023-10-23
- 1.0.37 — 2023-10-23
- 1.0.36 — 2023-10-05
- 1.0.35 — 2023-10-05
- 1.0.34 — 2023-10-05
- 1.0.33 — 2023-10-05
- 1.0.32 — 2023-10-05
- 1.0.31 — 2023-09-29
- 1.0.30 — 2023-09-29
- 1.0.29 — 2023-09-29
- … 37 more at https://npm.io/package/@arlinear/quiz-react/versions

## README

# Arlinear Component Lib for React

## Install dependencies

`npm install`

## Start Self-Host Container

Follow the steps here: [Arlinear Self Host](https://github.com/ArlinearEd/ArlinearSelfHost), or self host with Supabase: [Arlinear Self Host Supabase](https://github.com/ArlinearEd/ArlinearSelfHostSupabase)

## 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.

```jsx
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:

```jsx
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;
```

---
_Source: https://npm.io/package/@arlinear/quiz-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._