xapi-form-example/publishAttachment.html at master · OpenLearningNet/xapi-form-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- The title of the form -->
    <title>xAPI Form Example</title>

    <!-- JS and CSS Dependencies: -->

    <!-- xAPI base functionality -->
    <script src="dist/tincan-min.js"></script>
    <!-- Setting up the xAPI connection from launch data -->
    <script src="dist/xapi-interface.js"></script>
    <!-- Functionality for publishing attachments over xAPI -->
    <script src="dist/xapi-publish.js"></script>

    <!-- Base style sheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <canvas id="drawing" style="border: 1px solid black; box-sizing: border-box;"></canvas>
    </div>
    <div>
      <textarea id="description" placeholder="Display Text" style="width: 640px; box-sizing: border-box;"></textarea>
    </div>
    <button id="submit-button" type="button">Publish</button>
    <!-- Saved status (centred) -->
    <div class="center spaced" id="status-message">
      <div class="small-block">Drawing has been published.</div>
    </div>

    <!-- Initialise functionality -->
    <script>
      // Find the status box labelled with the id "status"
      var statusBox = document.getElementById("status-message");

      // Hide this box
      statusBox.style.display = "none";

      // Find the canvas element with the id "drawing"
      var drawing = document.getElementById("drawing");

      // Implement a basic drawing app
      drawing.width = 640;
      drawing.height = 480;

      var context2d = drawing.getContext("2d");

      var lastX;
      var lastY;

      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top,
        };
      }

      function draw(evt) {
        var mousePos = getMousePos(drawing, evt);

        context2d.moveTo(lastX, lastY);
        context2d.lineTo(mousePos.x, mousePos.y);
        context2d.stroke();

        lastX = mousePos.x;
        lastY = mousePos.y;
      }

      drawing.addEventListener("mousedown", function (evt) {
        var mousePos = getMousePos(drawing, evt);

        lastX = mousePos.x;
        lastY = mousePos.y;
        drawing.addEventListener("mousemove", draw);
      });

      window.addEventListener("mouseup", function (evt) {
        drawing.removeEventListener("mousemove", draw);
      });

      // Find the submit button
      var submitButton = document.getElementById("submit-button");

      submitButton.addEventListener("click", function () {
        // Hide the status box
        statusBox.style.display = "none";

        // Disable the submit button
        submitButton.disabled = true;

        var dataUri = drawing.toDataURL();
        var displayText = document.getElementById("description").value;

        var attachments = [
          createSupportingMedia("image/png", dataUri, displayText, "A picture"),
        ];

        publishAttachments(attachments)
          .then(function () {
            // Show the status box
            statusBox.style.display = "";
            submitButton.disabled = false;
          })
          .catch(function (error) {
            alert("Unable to publish. Try again later.");
            console.log(error, attachments);
            submitButton.disabled = false;
          });
      });
    </script>
  </body>
</html>