Embed media content

PDF

For some tasks, you need to create PowerPoint slides or Word documents to provide task instructions or display the source data.

To do this, convert the PowerPoint presentation or Word document to a PDF, then add a PDF viewer via the Code Editor.

Code example

<div id="pdfViewer"><img src="https://temp_bucket.s3.amazonaws.com/PDFViewer.png"></div><br>
 
/*This div will be replaced by the PDF viewer*/
 
<script type="text/javascript" id="ready_script">    
    $(function openPDFViewer (){
        var pdfLink = "${question.data['pdf_file']}";
        $("#pdfViewer").replaceWith($('<iframe src="' + pdfLink + 
        '" frameborder="0" width="100%" height="800" 
        allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>'))
    })  
</script>

HTML5 video

The following example contains an HTML5 video player that is Flowplayer.

Code example

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://public.crowdcontrol.s3.amazonaws.com/flowplayer/flowplayer.min.js"> </script>
<link rel="stylesheet" type="text/css" href="https://public.crowdcontrol.s3.amazonaws.com/flowplayer/minimalist.css">

<#list questions as question>
    <div class="flowplayer">
        <video src="${question.data['video_url']}"></video>
    </div>
</#list>

HTML5 audio

The following example contains an HTML5 audio player that is Audio.js.

Code example

<script src="https://public.crowdcontrol.s3.amazonaws.com/audiojs/audio.min.jss"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
 
<audio src="${question.data['audio_url']}" preload="auto" />

Image grid

You can insert an image or video grid using the Bootstrap Thumbnails component.

Code example

<ul class="thumbnails">
    <li class="span3">
        <div class="thumbnail">
            <img src="${question.data.url}">
            <h5>Thumbnail label</h5>
            <p>Thumbnail caption right here...</p>
        </div>
    </li>
 
    <!-- or use the <a> tag instead of <div> -->
    
    <li class="span3">
        <a href="#" class="thumbnail">
            <img src="${question.data.url1}">
        </a>
    </li>
 
</ul>