Mobile-friendly JSXGraph

Murray Bourne

Singapore

Abstract

Mobile devices have outsold laptops and desktops since 2016, and it can be safely assumed the majority of students access their important daily information via their phones. Yet most educational institutions, even in countries with high mobile penetration, continue to present learning materials in formats that only make sense on laptop or desktop devices with large screens. Most JSXGraph examples “in the wild” fall into this category and cannot be appreciated by students while on their phones.

This talk will outline methods for ensuring HTML pages involving JSXGraph are fit for use on a phone. We’ll discuss alternatives to setting fixed width and height for the JSXGraph <DIV>, and how to allow for a change of phone orientation. The talk will also cover how to work around some of the quirks of resizing and still produce an acceptable interactive graph that works on all screen sizes.

To get most out of this talk, it is assumed you have some basic CSS knowledge, and are comfortable with javascript coding.