Link Search Menu Expand Document

Using radio buttons and checkboxes

Table of contents

  1. Using radio buttons and checkboxes

Using radio buttons and checkboxes

/** Multiple choice with input */
const countRightAnswers = (tag, internals) => {
  const rightAnswerKeyword = `${tag.fullKey}:rightAnswers`
  const increaseByRightAnswers = (v) => v + (tag.values
    ? tag.values[0].length
    : 0)

  internals.cache.fold(rightAnswerKeyword, increaseByRightAnswers, 0)

  return tag.values
    ? tag.values.flatMap((v, i) => v.map((w) => [
      w,
      i,
      tag.fullKey,
      tag.fullOccur,
      internals.cache,
      internals.aftermath,
    ]))
    : []
}

const refreshInputChecked = (elementId, aftermath) => {
  const oldInput = document.getElementById(elementId)
  if (oldInput && oldInput.checked) {
    aftermath.register(`${elementId}:recheck`, () => {
      const newInput = document.getElementById(elementId)

      if (newInput) {
        newInput.checked = true
      }
    })
  }
}

const createInputElement = (classLabel) => (value, index, type, fullKey, fullOccur, cache, aftermath) => {
  const rightAnswerKeyword = `${fullKey}:rightAnswers`
  const rightAnswerCount = cache.get(rightAnswerKeyword, 0)

  const elementId = `${fullKey}-${fullOccur}-${index}`
  const inputType = rightAnswerCount === 1 ? 'radio' : 'checkbox'

  refreshInputChecked(elementId, aftermath)
  const className = type === 0 ? `class="${classLabel}" ` : ''

  return `
    <input type="${inputType}" id="${elementId}" name="${fullKey}" />
    <label ${className} for="${elementId}">${value}</label>
  `
}

const front = closet.Stylizer.make({
  separator: '<br />',
  mapper: createInputElement('')
})

const backClassName = 'closet-mc-right-answer'

const back = closet.Stylizer.make({
  separator: '<br />',
  mapper: createInputElement(backClassName),
})

const inputMultipleChoiceStyle = `
.${backClassName} {
  color: lime;
}`

const addHighlightCSS = (entry, internals) => {
  const keyword = 'inputMultipleChoice'

  if (!internals.environment.post(keyword, () => true, false)) {
    closet.browser.appendStyleTag(inputMultipleChoiceStyle)
  }
}

const wrappedMultipleChoiceShow = closet.wrappers.aftermath(closet.recipes.multipleChoice.show, addHighlightCSS)

filterManager.install(wrappedMultipleChoiceShow({
  tagname: 'mc',
  getValues: countRightAnswers,
  frontStylizer: front,
  backStylizer: back,
}))
Which of the following are valid HTML input types?
[[mc1::checkbox||color::radiobutton]]

Which of these is a true statement about the parietal bone?
[[mc2::each bone is roughly quadrilateral in form]]
[[mc2::::has two surfaces, four borders, and six angles]]
[[mc2::::it is named from the Latin paries (-ietis), rock]]

Which one of these is NOT a part of the brain?
[[mc3::Dendritic spine::Ventral horn||Basal ganglia||Prefrontal cortex]]