JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

JavaScript

import { html, render, createContext, useState, useEffect, useContext } from "https://unpkg.com/htm/preact/standalone.module.js"
	
const questionTypes = {
	addition: {
  	name: "Basic addition",
  	generate() {
      const a = Math.floor(Math.random() * 10)
      const b = Math.floor(Math.random() * 10)

      return { a, b }
    },
    check({ a, b }, { sum }) {
    	return sum === a + b
    },
    Question({ data: { a, b } }) {
    	return html`${String(a)} + ${String(b)} = <${Inputs.Number} id="sum" />`
    }
  },
  
  subtraction: {
  	name: "Basic subtraction",
  	generate() {
    	const a = Math.floor(Math.random() * 10)
      const b = Math.floor(Math.random() * 10)

      return { a, b }
    },
    check({ a, b }, { difference }) {
      return difference === a - b
    },
    Question({ data: { a, b } }) {
    	return html`${String(a)} - ${String(b)} = <${Inputs.Number} id="difference" />`
    }
  },

	vectorAddition: {
  	name: "Vector addition",
  	generate() {
      const a1 = Math.floor(Math.random() * 10)
      const a2 = Math.floor(Math.random() * 10)
      const b1 = Math.floor(Math.random() * 10)
      const b2 = Math.floor(Math.random() * 10)

      return { a1, b1, a2, b2 }
    },
    check({ a1, a2, b1, b2}, { c1, c2 }) {
      return (c1 === a1 + b1) && (c2 === a2 + b2)
    },
    Question({ data: { a1, a2, b1, b2 } }) {
      return html`
        (${String(a1)}, ${String(a2)}) +
        (${String(b1)}, ${String(b2)})
        = (
          <${Inputs.Number} id="c1" style=${{ width: 50 }} />,
          <${Inputs.Number} id="c2" style=${{ width: 50 }} />
        )
      `
    }
  },
  
  vectorSubtraction: {
  	name: "Vector subtraction",
  	generate() {
      const a1 = Math.floor(Math.random() * 10)
      const a2 = Math.floor(Math.random() * 10)
      const b1 = Math.floor(Math.random() * 10)
      const b2 = Math.floor(Math.random() * 10)

      return { a1, b1, a2, b2 }
    },
    check({ a1, a2, b1, b2}, { c1, c2 }) {
      return (c1 ===...