Accessible Math Notes With Answer Toggle

Accessible Math Notes with Answer Toggle

I developed a simple JavaScript toggle for showing/hiding answers in math notes, using EM tags for semantic markup. It allows professors to maintain a single HTML document with embedded answers that can be toggled on/off for students, printing, or PDF exports. This reduces maintenance overhead by eliminating the need for separate versions of content with and without answers.

Problem / Context

Professors often create math homework or notes with answers, but distributing versions without answers (for students) and with answers (for grading/printing) requires duplicating content. This leads to version drift and extra work. A toggle mechanism in a single page solves this, especially for accessible, web-based math content using MathJax.

Constraints / Goals

  • Client-side toggle: no server needed.
  • Semantic: use EM for emphasis/answers.
  • Accessible: works with screen readers, keyboard navigation.
  • Simple: minimal code, easy integration.
  • Useful for education: toggle before print/PDF.

Core Approach

Mark answers with tags. JavaScript functions hide/show all EM elements by changing visibility. A global flag tracks state, and a button calls toggleanswers().

Initialization

var answersVisible = true; // Track state

Toggle Function

function toggleanswers() {
  if (answersVisible == false) {
    show();
  } else {
    hide();
  }
}

Hide Answers

function hide() {
  var tagslist = document.getElementsByTagName("EM");
  answersVisible = false;
  for (var i = 0; i < tagslist.length; i++) {
    tagslist[i].style.visibility = "hidden";
  }
}

Show Answers

function show() {
  var tagslist = document.getElementsByTagName("EM");
  answersVisible = true;
  for (var i = 0; i < tagslist.length; i++) {
    tagslist[i].style.visibility = "visible";
  }
}

Usage in Content

<p>Solve: 2x + 3 = 7 <em>Answer: x = 2</em></p>
<button onclick="toggleanswers()">Toggle Answers</button>

CSS Enhancements for Classroom Use

Beyond visibility toggles, CSS can collapse answer space entirely (using display: none) or leave blank areas for student notes. For collapse, modify the hide function to set display: none, removing space. For note-taking, add margins or borders around EM elements when hidden, creating writable gaps.

/* For collapsing space */
.hidden-answer { display: none; }

/* For leaving space for notes */
.hidden-answer { visibility: hidden; border-bottom: 1px solid #000; margin-bottom: 1em; }

This supports in-class follow-along, where students see blanks to fill in answers manually.

Results / Impact

  • Single source for content with togglable answers.
  • Professors print/PDF with or without answers.
  • Reduces errors from maintaining multiple files.
  • Accessible: EM tags convey emphasis.

Trade-offs / Limitations

  • Assumes EM for answers; not automatic.
  • Visibility change may not hide in all contexts.
  • No persistence across page reloads.

Next Steps

  • Add localStorage for state persistence.
  • Support other tags or classes.
  • Integrate with MathJax for math toggles.

Tech Summary

JavaScript DOM manipulation, visibility CSS, semantic HTML.

Summary Pattern Example

Problem: Maintaining separate homework versions with/without answers.
Approach: EM-tagged answers with JS visibility toggle.
Result: Single maintainable document for educational content.

Portfolio accessibilitymathjaxjavascripteducationdom