diff --git a/playground/index.html b/playground/index.html
index cbb7c2ac5..87cef30b3 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -9,8 +9,11 @@
</head>
<body>
<div id="vm-devtools">
+ <h2>Scratch VM Playground</h2>
+ <button id="greenflag">Green flag</button>
+ <button id="stopall">Stop</button>
<div id="tab-blockexplorer">
- <h2>VM Block Representation</h2>
+ <h3>VM Block Representation</h3>
<pre id="blockexplorer"></pre>
</div>
</div>
diff --git a/playground/playground.css b/playground/playground.css
index f1a54242e..b20b2bd91 100644
--- a/playground/playground.css
+++ b/playground/playground.css
@@ -20,7 +20,7 @@ body {
#blockexplorer {
position: absolute;
width: 100%;
- height: 80%;
+ height: 75%;
overflow: scroll;
border: 1px solid #fff;
background: rgb(36,36,36);
diff --git a/playground/playground.js b/playground/playground.js
index 1b8b99523..623e5c387 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -23,4 +23,12 @@ window.onload = function() {
// Run threads
vm.runtime.start();
+
+ // Handlers for green flag and stop all.
+ document.getElementById('greenflag').addEventListener('click', function() {
+ vm.runtime.greenFlag();
+ });
+ document.getElementById('stopall').addEventListener('click', function() {
+ vm.runtime.stopAll();
+ });
};