JSFiddle - React, Tailwind, and code Playground

by cayhorstmann

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href='https://horstmann.com/codecheck/css/codecheck_tracer.css' rel='stylesheet' type='text/css'/>  <title>JS Bin</title>
</head>
<body>
    <div class='codecheck_tracer'></div>
</body>
</html>

JavaScript

import { addExercise, Code, Obj, Frame } from 'https://horstmann.com/codecheck/script/codecheck_tracer.js'
addExercise(function*(sim) {
const code = sim.add(0, 0, new Code(`
int n = 1729;
int sum = 0;
while (n > 0)
{
   int digit = n % 10;
   int sum = sum + digit;
   n = n / 10;
}
// ...
`))
const vars = sim.add(5, 0, new Frame())
yield sim.start()
vars.n = 1729
code.go(); vars.sum = 0
code.go()
while (vars.n > 0)
{
  yield code.ask(); vars.digit = yield sim.ask(vars.n % 10)
  code.go(); vars.sum = yield sim.ask(vars.sum + vars.digit)
  code.go(); vars.n = yield sim.ask(Math.trunc(vars.n / 10))
  code.go(3)
}
yield code.ask(9)

})