JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://unpkg.com/[email protected]/lib/browser/math.js"></script>
<!--

Add these rules one-by-one:
f(0) = 4
f'(0) = -1
f''(0) = 3
f'''(0) = 5
f''''(0) = -7

The reasoning here is that if you're using a polynomial as your solution (which you hopefully are), the lack of divisibility of 3, 5, and -7 mean that the denominator of your fraction will always be plain as day (not hidden behind some kind of reduced fraction).

So hopefully when we talk about factorials and all that it will be more obvious what's going on.

-->

CSS

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

body {
  font-family: 'Patrick Hand', sans-serif;
}

.App {
  font-size: 24px;
  line-height: 1.5;
  max-width: 600px;
  margin: 64px auto;
  color: #1c1c1c;
}

.red {
  color: #d60b0b;
}
.gray {
  color: #9e9e9e;
}

.eqInput {
  font: inherit;
  border: none;
  background: #eee;
  padding: 2px 8px;
  border-radius: 4px;
  width: 150px;
}

JavaScript

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

import rough from "https://unpkg.com/[email protected]/bundled/rough.esm.js";

function App() {
	return html`
  	<div class="App">
    	<p>You know about derivatives, right?</p>
      <p>They're honestly a pretty crazy idea. To consider rate of change at a single point? It doesn't even really make sense when you describe it that way.</p>
      <p>But mathematicians like to push the limits, I suppose. 🙄</p>
      <hr />
      <p>Anyway, I'm going to assume that you're comfortable taking derivatives of a function.</p>
      <p>Your job right now is to create a function where f(<span class="red">0</span>) = 2. <span class="gray">(There are many correct answers here; just pick your favorite.)</span></p>
      
      <${FunctionCreationStation}
      	desiredDerivatives=${[2]}
        defaultExpression="x"
      />
      
      <p>
      	Sweet! Now let's step it up a notch. I want you make another function. It still needs to have f(<span class="red">0</span>) = 2. But I also want you to make it so the derivative, f', works out so that f'(<span class="red">0</span>) = -1.
      </p>
      <p>
        That's two rules for one function. Got it?
      </p>
      
      <${FunctionCreationStation}
      	desiredDerivatives=${[2, -1]}
        defaultExpression=""
      />
      
      <p>
      	Amazing! Now things will get a bit harder. I want you to create a function that still follows the previous two rules, f(<span class="red">0</span>) = 2 and f'(<span class="red">0</span>) = -1, but which also has f''(<span class="red">0</span>) = 3.
      </p>
      
      <${FunctionCreationStation}
      	desiredDerivatives=${[2, -1, 3]}
        defaultExpression=""
      />
      
      <p>
      	That was a really interesting one. At this point most people are creating solutions that are polynomials (so some constants times <span class="red">x</span>, <span...