A JS beginner's question. The following does not run in Whisk. It does run in preview on BBEdit and Textmate and on a browser. Does Whisk not recognize the canvas or have I set up this simple sample incorrectly?
<!DOCTYPE html>
<html lang="english">
<head>
<title>Canvas Test</title>
</head>
<body>
<canvas id=myCanvas height=800 width=800;">
</canvas>
<script>
myCanvas.onclick = function() {
var Questions = ["How much is (16)^(1/2)? 8, 4, 2, 32",
"Which species was first in space? Dog, Cat, Chimp, Rat",
"Who has the largest number, just type first letter: Avogadro, Eddington, Graham, or Planck?",
];
var Answers = ["4", "Dog", "G"];
var which_one = Math.floor(Math.random() * Questions.length);
var answer = prompt(Questions[which_one]);
if (answer == Answers[which_one]) alert("You are correct")
else alert("Oops, not right");
}
</script>
</body>
</html>
Thanks for your reply, Daniel. I added quotation marks and color for visibility. Still does not run in preview on Whisk (or VS Code). Curiously, even without the quotation marks it will run in Safari, BBEdit, Nova, Textmate, even on a w3schools try-it page. All run with or without the quotation marks.
Maybe something about the way Whisk (and VS Code, although that’s outside the scope of discussion) treats the canvas?
<!DOCTYPE html>
<html lang="english">
<head>
<title>Canvas Test</title>
</head>
<body>
<canvas id="myCanvas" height="200" width="200" style="background-color: green"></canvas>
<script>
myCanvas.onclick = function() {
var Questions = ["How much is (16)^(1/2)? 8, 4, 2, 32",
"Which species was first in space? Dog, Cat, Chimp, Rat",
"Who has the largest number, just type first letter: Avogadro, Eddington, Graham, or Planck?",
];
var Answers = ["4", "Dog", "G"];
var which_one = Math.floor(Math.random() * Questions.length);
var answer = prompt(Questions[which_one]);
if (answer.toUpperCase() == Answers[which_one])
alert("You are right !")
else alert("Sorry, not right");
}
</script>
</body>
</html>
Yes, certainly I see the green square of the canvas. But the quiz will not play in Whisk preview. It will play in the preview of other editors, including w3schools. It will play on a browser. It only does not play in the previews of Whisk (or VS Code). Is Whisk preview live?
That's true -- for testing, you could add a console.log() if you wanted some visual feedback instead of an alert. This would show up in the console which you can get to by clicking i in the top toolbar. Clicks like this will be detected:
<!DOCTYPE html>
<html>
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo">Click me.</p>
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>
I suppose, but it seems more intuitive to click a button rather than clicking text acting as a button and writing code to accommodate the editor. Hopefully Team Tumult will fix the live preview for canvas, buttons, and so on.
Thanks for the feedback. Please note that the underlying issues is that Whisk isn't displaying alerts/prompts - the actual clicks work fine. We just need to implement some callbacks for these; I don't think it will be too difficult.
