New basic html template:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="JavaScript">
function ImageLoadFailed() {
window.event.srcElement.style.display = "None";
}
</script>
</head>
<body>
<font face="Calibri" size=3>
<h1>Your heading here</h1>
<center>
<img
src="YourImageHere.jpg" width="90%"
OnError="ImageLoadFailed()">
</center>
<p>
Your text here
<p>
<b>Your question here?</b>
<p>
</font>
</body>
</html>
Includes:
(1) font size is "3", which is the html default anyway
(2) "viewport" is set automatically according to your device screen - ie. text wraps at the edge of the screen
(3) "ImageLoadFailed" is a javascript function for when your image file is not available - for instance, not downloaded with the html by the students, or lost somehow. The function removes the big empty square that would otherwise appear in your document. (Caveat: see the NB below.)
(4) If your image is present and does load, it will appear centered, and taking up 90% of the screen - good for phones in portrait mode, a bit huge in other cases.
NB: that javascript function ImageLoadFailed works in Chrome and IE but does NOT work in Firefox nor in the default HTML Viewer on Android. There is
some better html jiggery pokery that can be done, but I have no friggen idea how to understand and implement it. If someone could change the weird words in that link to some particular instance of less weird words that would work just like ImageLoadFailed, that would be super duper.
Why HTML?
Relative to a doc file, it's tiny. Also, even with the merely modest typesetting and display capabilities, the screen result is potentially more attractive than a doc in a doc viewer. Also, every phone has a browser.
Why not HTML?
Add in an image and the total file size might be bigger than a doc with the same image included. Also, the image file is a separate download, so the student-side procedure is automatically more complex than finding a single doc. Also, not all doc viewers are shit, sluggish, and ugly.