JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://unpkg.com/[email protected]/lib/marked.js"></script>

JavaScript

import { useState, useMemo, html, render } from 'https://unpkg.com/htm/preact/standalone.module.js'

const question = {
	schema: {
  	values: {
      a: { type: "number" },
      b: { type: "number" }
    },
    requirements: []
  },
	UI: {
    blocks: [
      {
        type: "text",
        props: {
          content: "What is **{a}** + {b}?"
        }
      },
      {
        type: "numberInput",
        props: {},
        name: "sum"
      }
    ]
  },
  checkAnswer: {
  	type: "js",
    code: `
      return sum === a + b
    `
  },
  /*
  checkAnswer: {
  	type: "expression",
    code: "sum === a + b"
  }
  */
  help: {
  	videos: [
      {
      	youtubeId: "video1",
        description: "Slow example 1"
      },
      {
      	youtubeId: "video2",
        description: "Slow example 2"
      },
      {
      	youtubeId: "video3",
        description: "Fast example"
      },
    	{
      	youtubeId: "video4",
        description: "Negative numbers",
        condition: { type: "expression", code: "a < 0 || b < 0" }
      },
      {
      	youtubeId: "video5",
        description: "2-digit numbers",
        condition: { type: "javascript", code: "return a > 9 || b > 9" },
      }
    ]
  }
}

const generator = {
	for: question,
  schema: {
  	values: {
      min: { type: "number", default: 0 },
      max: { type: "number", default: 9 },
      roundTo: { type: "number", default: 1 }
    },
    requirements: [
    	"max >= min" // This is an expression
    ]
  },
  generate: {
  	type: "js",
    code: `
      let a = Math.random() * (max - min + roundTo) + min
      let b = Math.random() * (max - min + roundTo) + min

      if (roundTo > 0) {
        a = Math.floor(a / roundTo) * roundTo
        b = Math.floor(b / roundTo) * roundTo
      }

      return { a, b }
    `
  }
}

const challenge = {
	title: "Basic Addition",
	progressChange: {
  	correct: { type: "number", value: 0.2 }, // Increase progress by 0.2
    wrong: { type: "expression", value: "progress *...