maroon-tutorial

Writing the cursed XML pages

The boilerplate 😔

ok its not really boilerplate but you must title pages

<h1>page title</h1>

---

Plaintext

To insert plain text, use the following HTML tags <p></p>, <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>. The sizes of each are shown below. Note: the underline in h1 is created by markdown and will not be created by html renderers. To insert a line break, use <br> (depending on the situation, you may want two), no closing tag needed.

• h1

• h2

• h3

• h4

• h5

• h6

• p

---

Code Blocks

To insert a code block, use the following formula:

<pre>
<code class="language-@@">
</code>
</pre>

In this formula, @@ represents the language to use. Valid options include js, java, sh, cpp, html, xml, md, text, and many, many more. The code within the code tags must be tabbed as it should be displayed, not to look proper in the XML.

---

Quiz Sections

the quiz system is all to be re-written (simplification and removal of IDs)

<div class="quizSect">
    <span class="qtitle">quiz</span>&emsp;@@<br><br>
    <div class="mcqDiv" id="$$$" data-answer="%%">
        <span>&emsp;<input type="radio" name="$$$-radio" value="a"> &&</span><br>
        <span>&emsp;<input type="radio" name="$$$-radio" value="b"> &&</span><br>
        <span>&emsp;<input type="radio" name="$$$-radio" value="c"> &&</span><br>
        <span>&emsp;<input type="radio" name="$$$-radio" value="d"> &&</span>
    </div>
    <br><button onclick="runQuiz('$$$', this)" data-attempts="0">check</button>
</div>

Insert the following where placeholders are:
Where @@ is present, write the quiz question
Where $$$ is present, place a random ID. To generate a string to use, you can run echo "<smash the keyboard here>" | shasum -a 256 and pick a portion of the output to use.
Where %% is present, place the answer (a, b, c, or d)
Where &&s are present, place the multiple choice options

---

Embedding Remote Content

To embed remote content, use the HTML iframe element. Ex: <iframe src="https://github.com/" width="100%"></iframe>. Currently, there is no default styling for iframes.

---

Tooltips

To add tooltips, simply add a span tag with the data-tooltip attribute set, within the current body of text. Specify the tooltip contents in the attribute.

<p> I do not like conducting a proper <span data-tooltip="A procedure for critical evaluation; a means of determining the presence, quality, or truth of something; a trial.">test</span> before I push my code</p>

---

Registering created pages

For pages to be displayed in the table of contents and to be integrated with the progress-saving mechanism, all created pages must be added to the pageManifest in manifest.js, the only JavaScript file that is not minified or packed. To register a page, add it in the appropriate order in the pageManifest array, using Page.

• pageTitle (String) is the page title to be displayed in the table of contents. Keep this title succinct. Ex: Intro
• fileName (String) is the name of the XML file containing the page, in the src/pages directory. Ex: 01.xml
• uniqueID (Number) is any Number, but MUST be unique. Ideally, these numbers would be sequential, but this is not necessary. Do NOT use an id that was used an any previous versions, as it may incorrectly mark pages as read. Ex: 0

---

testing locally

When testing locally, your browser may be sad for 2 reasons

1. local file restrictions
2. your fs isn't a webserver, proper headers wont be sent

To disable local file restrictions, open developer settings and enable the option under security (Safari 17.0 / 19616.1.20.11.3).

You must also disable caching. To do this, open the web inspector, and check "Disable Caches" under Network (Safari 17.0 / 19616.1.20.11.3). This is required as each page is loaded through an XHR request to the page's XML file, and some browsers handle this caching differently than resources loaded through standard methods.

Now, the page should act more like it would when in production.