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, Frame } from 'https://horstmann.com/codecheck/script/codecheck_tracer.js'
addExercise(function*(sim) {

const code = new Code(sim, 0, 0, `
int a = 5;
int b = 8;
int temp = a;
int a = b;
int a = temp;`)
const vars = new Frame(sim, 0, 5)
vars.a = 5
yield sim.next('Initialized a') // Wait for the student to hit the Next button
code.go(2) 
vars.b = 8
yield sim.next('Initialized b')
code.go(3)
vars.temp = yield sim.ask(vars.a)
code.go(4)
vars.a = yield sim.ask(vars.b)
code.go(5)
vars.b = yield sim.ask(vars.temp)
})