Canvas-revealjs NPM

Canvas Revealjs

This is a very experimental package for interacting between slides hosted as part of a Canvas LMS and a server so that students can interact naturally with the slides.

Use

This package supports three sets of interactivity via canvas: 1. Polls 2. Word clouds 3. Ticker 4. Peer marking 5. Imagexy

You can see a video recording of the functionality here.

Polls

Each poll needs a unique number. To set up the poll itself, where students can vote, insert a slide such as (here using zero as the poll number):

<section data-markdown>
    <script type="text/template">
        ## Have you ever voted in a federal election?
        <div onclick="post_poll(0,'Yes',this)"><a href="#" onclick="return false;">Yes</a></div>
        <div onclick="post_poll(0,'No',this)"><a href="#" onclick="return false;">No</a></div>
    </script>
</section>

You can insert a live view of the poll status using:

<section data-markdown class="not_on_canvas">
    <script type="text/template">
        <div id="poll_0_get" style="width: 900px; height: 700px;"></div>
    </script>
</section>

Clouds

Inserting a word cloud is very similar, again it needs a unique ID for each cloud.

<section data-markdown>
    <script type="text/template">
        ## Why are you studying engineering?
        <div id="cloud_1_post" onclick="vote_cloud(1,'Why are you studying engineering?')"><a href="#" onclick="return false;">Click here to respond</a></div>
    </script>
</section>

<section data-markdown class="not_on_canvas">
    <script type="text/template">
        <div id="cloud_1_get" style="width: 900px; height: 700px;"></div>
    </script>
</section>

Ticker

To insert the ticker, place the following code below the final </div> tag at the end of your revealjs slide block:

<div id="hidden" style="display:none;"><div id="header"></div></div>

Peer marking

Inserting a peer marking assignment is relatively straightforward. Again it needs a unique ID for each cloud.

<section data-markdown>
    <script type="text/template">
        ## Student name
        <table>
        <tr><td>
        Content:</td>
        <td><span onclick="post_peer(0,0,'F')"><a href="#" onclick="return false;">F</a></span></td>
        <td><span onclick="post_peer(0,0,'P')"><a href="#" onclick="return false;">P</a></span></td>
        <td><span onclick="post_peer(0,0,'C')"><a href="#" onclick="return false;">C</a></span></td>
        <td><span onclick="post_peer(0,0,'D')"><a href="#" onclick="return false;">D</a></span></td>
        <td><span onclick="post_peer(0,0,'HD')"><a href="#" onclick="return false;">HD</a></span></td>
        </tr><tr><td>
        Structure:
        <td><span onclick="post_peer(0,1,'F')"><a href="#" onclick="return false;">F</a></span></td>
        <td><span onclick="post_peer(0,1,'P')"><a href="#" onclick="return false;">P</a></span></td>
        <td><span onclick="post_peer(0,1,'C')"><a href="#" onclick="return false;">C</a></span></td>
        <td><span onclick="post_peer(0,1,'D')"><a href="#" onclick="return false;">D</a></span></td>
        <td><span onclick="post_peer(0,1,'HD')"><a href="#" onclick="return false;">HD</a></span></td>
        </tr><tr><td>
        Visual aids:
        <td><span onclick="post_peer(0,2,'F')"><a href="#" onclick="return false;">F</a></span></td>
        <td><span onclick="post_peer(0,2,'P')"><a href="#" onclick="return false;">P</a></span></td>
        <td><span onclick="post_peer(0,2,'C')"><a href="#" onclick="return false;">C</a></span></td>
        <td><span onclick="post_peer(0,2,'D')"><a href="#" onclick="return false;">D</a></span></td>
        <td><span onclick="post_peer(0,2,'HD')"><a href="#" onclick="return false;">HD</a></span></td>
        </tr><tr><td>
        Delivery:
        <td><span onclick="post_peer(0,3,'F')"><a href="#" onclick="return false;">F</a></span></td>
        <td><span onclick="post_peer(0,3,'P')"><a href="#" onclick="return false;">P</a></span></td>
        <td><span onclick="post_peer(0,3,'C')"><a href="#" onclick="return false;">C</a></span></td>
        <td><span onclick="post_peer(0,3,'D')"><a href="#" onclick="return false;">D</a></span></td>
        <td><span onclick="post_peer(0,3,'HD')"><a href="#" onclick="return false;">HD</a></span></td>
        </tr><tr><td>
        Question response:
        <td><span onclick="post_peer(0,4,'F')"><a href="#" onclick="return false;">F</a></span></td>
        <td><span onclick="post_peer(0,4,'P')"><a href="#" onclick="return false;">P</a></span></td>
        <td><span onclick="post_peer(0,4,'C')"><a href="#" onclick="return false;">C</a></span></td>
        <td><span onclick="post_peer(0,4,'D')"><a href="#" onclick="return false;">D</a></span></td>
        <td><span onclick="post_peer(0,4,'HD')"><a href="#" onclick="return false;">HD</a></span></td>
    </tr></table>
    </script>
</section>

<section data-markdown class="not_on_canvas">
    <script type="text/template">
        <div id="peer_0_get" style="width: 900px; height: 700px;"></div>
    </script>
</section>

Imagexy

You can add an image that students can click on, and their click location will be shown on the teacher version. To set up the student version, use a slide like this:

<section data-markdown>
    <script type="text/template">
        <canvas id="post_image_xy_0" image_num=0 im="vote-compass.png" ></canvas>
    </script>
</section>

You can insert a live view of the image with overlaid circles with:

<section data-markdown class="not_on_canvas">
    <script type="text/template">
        <canvas id="image_xy_0_get" image_num=0 im="vote-compass.png" marker-color=#000000></canvas>
    </script>
</section>