** Using WeBWorK **

We have been aiming WeBWork & Moodle at mobile devices this winter semester, and I thought that should share some things to see if there is a future in what we ended up doing, or options in the works. Our WeBWorK version is 2.5 and we are using Moodle 2.2 with wwassignment5. I could not get the kind of behavior I expected and was seeking for mobile devices out of the stock moodle theme, and I did not want to switch to WeBWorK versions just before classes started (a reply under Installation suggested that 2.5.1.1 has the themes better organized and behaved).

It happens that quite a few of our students have mobile devices, 100% of them under 25 years old it seems. One cannot expect that our students have suitable computers or internet access at home, nor do many have laptops or larger pad devices. They have Androids and iPhones, and we found that the Moodle MyMobile theme is excellent for these. So, we tweaked a WeBWorK theme and problems to work through Moodle-MyMobile on an iPhone and a $64 Android device (Virgin Mobile Chaser from WalMart, no contract, taxes included). This is a hack job for results right now, and it went well with students this last week. It will break in general if not cleaned up.

Here is a link to see a result (click on Homework 2 : 1.3 polynomials and algebraic expressions, guest access OK without password):

http://cs.fdltcc.edu/moodle/course/view.php?id=6

Iphone safari, android browser, and Nexus 7 Opera mini should bring on the Moodle MyMobile theme. These are not yet formatted to be pretty, just usable for students right now; they are problems from the library someone else wrote which I edited for use by a small mobile device.

Here are the things I did in WeBWorK and Moodle to serve mobile devices.

1) enabled MyMobile theme in moodle for mobile devices (pads can usually use mobile theme by selecting a mobile browser, say Opera mini)

2) copied moodle/ to moodle2/, moodle.css to moodle2.css, and moodle.js to moodle2.js

3) added moodle2 theme to constants.pm

4) in moodle2/system.template:
- removed elements not wanted: <div class="moodleIgnore">hide this in moodle</div>
- made the title smaller, down from H1: <h3><!--#title--></h3>

5) in htdocs/css/moodle2.css
- redid it with:
/* new attempt to turn off using moodleIgnore */
if (window!=window.top) {
document.write('<STYLE>.moodleIgnore {display:none;}</STYLE>');
document.write('<STYLE>#content{margin: 0 0 0 0;}</STYLE>');
document.write('<STYLE>.problem_set_options{display:none;}</STYLE>');
document.write('<STYLE>body{min-width:0}</STYLE>');
document.write('<STYLE>#big-wrapper{min-width:0}</STYLE>');
}
NOTE: This is turned on within any iframe, a hack here which works for now. I could not get the code in the original moodle.js to remove what I wanted out.

6) configured courses to use moodle2 theme.

7) edited WeBWorK problems, one by one, after seeing how they behaved in a small Android and in an old iPod Touch. I don't see an easy (meaning automated) way around this.
- commented out beginproblem(), like: #TEXT(beginproblem());
When used, problems get surrounded with light grey-background boxes which behave oddly on mobile devices, sometimes thin squashed boxes and sometimes off the screen, and moodle already boxes the problem. Almost every problem uses beginproblem(), and I found by accident that problems are easier to fit and view on mobile devices without the header and side-effects produced by beginproblem(). I feel uneasy about ommitting it, yet the results sure look nice on small mobile screens and fine within Moodle when used with the full-screen computer theme.
- split longer latex expressions which would go off a mobile screen.
- made smaller answer forms to fit on mobile screens
- used $BR, $BR $BR, and $HR liberally to make content easier to see on small screens in a more vertical fashion as these devices are designed for easy scrolling up and down.


I'm curious if there are better options to this scheme. This does seem to be solid so far as students doing webwork problems are concerned.

Ted Wetherbee
ted@fdltcc.edu