Forum Discussion

mahbag-e8b66d7e's avatar
mahbag-e8b66d7e
Community Member
3 years ago

to draw a triangle whose sides are long and can be changed(without uses states). I have JavaScript code but I do not know how to use it in the storyline?

Hi. I want to draw a triangle whose sides are long and can be changed. I have JavaScript code but I do not know how to use it in the storyline?

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();
</script>

</body>
</html>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_lineto

  • Lets educate you somewhat.

    1) Storyline as is doesnot support the Canvas-element. As is Storyline is all DOM-based.
    2) The code as is you have here, only draws a line on Canvas. A line from 0,0 to point 300,150.

    So how can i get this done then ?

    Well several methods. One is making a separate HTML, add all your code inthere and add that as WebObject in Storyline. I would suggest you go that route because thats the easiest.

    Other option is create a Canvas-element in Storyline with Javascript and then add Canvas drawing code like yours to it so you can draw on Canvas in Storyline. For this route you really need to know Javascript well, so i donot advise that to you as you are clearly just starting with it.

    As said the second option i DONOT advise you use because you need thorough Javascript knowledge for it. But when you do know it it is possible...as you can see here.

    https://360.articulate.com/review/content/20a7965e-832d-4316-a615-8da3746a839f/review

    Kind regards,
    Math

    • mahbag-e8b66d7e's avatar
      mahbag-e8b66d7e
      Community Member

      Hi .thanks.I want to create lines from 10 to 500 mm in length with a slider.Creating lines with states is very difficult.Students should measure and present the length of the lines with a ruler and give the program feedback.It seems to be better to use JavaScript