The power of the browser:

embedding Desmos and other content

Josh Lim
Learning Technologist (Centre for Learning & Teaching)

6th September 2022

Introduction

This content was made as part of the University of Bath “Creating Accessible Online resources” bookdown away day 2022.

The aim is to:

  • cover the how, why and pitfalls with embedded content
  • introduce the Desmos graphing calculator.

Why embed content?

Why include “media”?

The benefits of the web (over a static document) are:

  • access to up to date information
  • adding external image/video sources without worrying about copyright
  • interactive widgets can support the flow of learning, assessment for learning, exploration, etc


I’ll talk about the downsides later…

person walking past large web browser window

How?

Embedding content

The gitbook format is a fully functioning website!

person looking at image large web browser window

You can include:

  • links
  • image/video embeds
  • webpage/webapp embeds (e.g. twitter feed, desmos graphical calculator)
  • inline html, javascript, css with <tags>
    (e.g. <p>Markup you markdown!<\p>)

Adding links

Adding images from the web

Educational Exceptions: you can use copyrighted images (e.g. figure from journal) in your lecture notes if:

  1. it is for internal student use
  2. it directly illustrates the content

It can be useful to point to an image on the web if you:

  • host publicly (e.g. github)
  • use cat .gifs to support learning!

xkcd cartoon with balloon text sometimes I just can't get outraged over copyright law.

Adding videos

Copy and paste the embed code from any site - including Panopto!

Note: this Panopto video has quiz questions as you play through it!

Embedding other web content

  • Desmos graphing calculator
  • Xerte (see quiz example)
  • Microsoft Forms (general polls don’t show the results to student, but quiz allows you to give individuals instant feedback after all question have been submitted)
  • Mentimeter results slides (this is NOT for voting as audience paced voting slides don’t show the results)
  • Twitter feed
  • A webpage (tread carefully)

Desmos

a simple & interactive graphing calculator

Desmos graphing calculator

Desmos at a glance

Why use Desmos?

  • Interactive - students can play with parameters
  • Fast to create (+ easy animation)
  • Digitally Accessible
  • Free

Plotting in desmos

  • 2D Cartesian/polar coordinates
  • Domain/range restrictions/piecewise functions,
  • Shade area with inequalities, Differentiation, …
  • Paste tabular data from clipboard (1000 points) and fit

Making plots in Desmos

How to embed a Desmos graph

  1. Get the embed code from Desmos
  2. Paste in embed code to .Rmd file
  3. Change some embed code parameters
    • width="100%"
    • height="500px" (even 600px is probably ok even for iphone)
  4. Add a direct link (fallback for PDF and the edit on desmos button doesn’t display on mobile)

Adding a Desmos embed as a figure

Same as a “normal” bookdown figure but instead of knitr::include_graphics() use knitr::include_url(URL)

Example

View Travelling and standing wave plot. Upper: two identical but counter-propogating travelling waves will result in a standing wave below.

Bookdown Source




{r echo=FALSE, wavesanim , out.width=‘70%’, fig.show=‘hold’, fig.cap=“View Travelling and standing wave plot. Upper: two identical but counter-propogating travelling waves will result in a standing wave below.”} knitr::include_url(“https://www.desmos.com/calculator/qy6jc8mfi9?embed”)






Figure embed notes



    

  • Note: the figure referencing doesn’t work for in ioslides (you are unlikely to be cross-referencing anyway)
    • 

  • Reference as usual with \@ref(fig:label) (e.g. \@ref(fig:wavesanim) becomes Figure @ref(fig:wavesanim))
    • 

  • Captions make good places to links to graph
    • 




Desmos shortcomings



    

  • The embed only shows the plot, but not the left hand panel - you have to add sliders or student visit page to view the source
    • 

  • Not all Greek letters letters recognised! (Fix: Chrome/Edge addin for full Greek alphabet
    • 

  • No permalinks - Desmos updates URL after each save
    • 

  • Graphs are public - don’t put any personal/private data there
    • 

  • It’s possible but generally not recommended to embed the whole calculator (see @ref(sec:embed-whole-desmos))
    • 




What about my PDFs/offline support?



If there is no connection to the internet, the iframe will not load.



If you compile to a PDF, nothing is displayed, which is why a link is important! Possibly, one can do something clever in R to add use an image if knit to PDF…



Take away messages





person with laptop sitting on top of large browser window



    

  • It’s easy to embed web content with bookdown
    • 

  • Embeds don’t work for offline/PDF use
    • 

  • Desmos is free, interactive for students and easy to use: give it a try!
    • 






Appendicies



Embedding the whole Desmos calculator



This is not generally recommended:



    

  • if you alter a parameter, you get an annoying “do you want to leave this page” when trying to read next page
    • 

  • can be a squeeze on smaller screens
    • 






General tips for iframes and bookdown



    

  • don’t have too many iframes per page (can be slow to load, take up resources)
    • 

  • student interactions aren’t persistent and nothing gets saved: they get reloaded by a student every time they visit a page
    • 

  • Consider mobile/tablet users where the screen sizes are smaller: sometimes a link is better?
    • 

  • Avoid sites with advertising or a cookie requests that distracts from the content.
    • 

  • there isn’t always much space, so pick simple things to embed (bookdown has comfortable margins)
    • 

  • an iframe won’t display for students if they’re offline or viewing the PDF.
    • 




iframes and accessibility pitfalls



There are no intrinsic accessibility issues with iframes.



However



    

  • not all iframes work nicely on mobile browsers.
    • 

  • the organization of the pages may not be clear to screen readers.
    • 

  • navigation (via keyboard or due to increased zoom/limited size) can be challenging.
    • 




Accessibility suggestions



    

  • Test how it appears on your phone
    • 

  • Pick shorter/simple pages or sites that generate an embed code, rather than write your own.
    • 

  • Present a direct link alternative
    • 







Stock images from undraw (open source, colour-customisable images that can be used without attribution)