phette23
commented
1 year ago @nchan31 Is this problem unsolvable because the way you structure tours is to provide a single CSS selector? So if Moodle uses a different element for mobile versus desktop screens, it's impossible to make a tour that works on both.
The one work around I can think of is that Moodle appears to do device detection and provides some CSS hooks (see below); you would essentially, within one tour, create two CSS selector versions of every step with one prefixed for mobile devices and the other not. Since tours only display a step if the CSS selector matches an element, users only receive one version of each step.
Moodle <body> classes on laptop:
<body id="page-my-index" class="limitedwidth format-site path-my chrome dir-ltr lang-en_us yui-skin-sam
yui3-skin-sam moodle-cca-edu pagelayout-mydashboard course-1 context-26 uses-drawers
drawer-open-index jsenabled">On mobile (using Chrome dev tools to imitate a Galaxy):
<body id="page-my-index" class="limitedwidth format-site path-my chrome android dir-ltr lang-en_us
yui-skin-sam yui3-skin-sam moodle-cca-edu pagelayout-mydashboard course-1 context-26 mobiletheme
uses-drawers drawer-open-index jsenabled">Note the added android and mobiletheme classes. mobiletheme is probably a better hook since it's cross-platform. My first hope was limitedwidth but it looks like both screens have that class.
Anyways, it may be possible to build tours that work on both mobile and desktop devices, but it entails extra work. I would focus on making the tours spotless on desktop first before experimenting with this dual step approach on a tour.
Toggle to expand block drawer is located at bottom right, which is different from desktop browser (which is located at upper right).
This can pose a problem for some tours, such as this one that points to the course index that appears on the left side of the desktop browser: