Assigning categories
Table of contents
Example of assignning categories
Here we have several names of animal species, which are rendered in different ways.
/** Assign categories */
const baseStylizer = closet.Stylizer.make({
separator: '・',
processor: (v) => `《${v}》`,
})
const colorMapper = (v, _i, cat) => {
if (v === '') {
return []
}
const theColor = cat === 0
? 'yellow'
: cat === 1
? 'darkseagreen'
: 'indianred'
return `<span style="color: ${theColor};${cat === 0
? '-webkit-text-stroke: 0.8px black; text-stroke: 0.8px black;'
: ''}">${v}</span>`
}
const theBackStylizer = baseStylizer.toStylizer({
mapper: colorMapper,
})
const theFrontStylizer = baseStylizer.toStylizer({
mapper: (v) => v === '' ? [] : `<span style="color: lightgrey">${v}</span>`,
})
const theContexter = (tag) => {
const flattedValues = tag.values.flatMap((vs, i) => vs.map(v => [v, i]))
return flattedValues.map((v, i) => colorMapper(v[0], i, v[1]))
}
const assignCategorySettings = {
backStylizer: theBackStylizer,
frontStylizer: theFrontStylizer,
inactiveStylizer: baseStylizer,
contexter: theContexter,
}
filterManager.install(
closet.recipes.multipleChoice.show({
tagname: 'mc',
...assignCategorySettings,
}),
closet.recipes.multipleChoice.hide({
tagname: 'mch',
...assignCategorySettings,
}),
closet.recipes.multipleChoice.reveal({
tagname: 'mcr',
...assignCategorySettings,
}),
)
Legend: bees (yellow with black); crocodiles (cyan); cats (red).
[[mc1::Anthophila::::Panthera]]
[[mch2::Colletidae::Mecistops::Catopuma]]
[[mcr3::Megachiidae::Osteolaemus::Prionailurus]]
How it works
In its essence, the multiple choice filter actually assigns categories.
These categories are stylized using a Stylizer
.
[[tagname::value1||value2::value3::value4||value5]]
If <tagname>
was a tag implementing the multipleChoice
filter, value1
and value2
would belong to category 1, value3
to category 2, and value4
and value5
belongs to category 3.
In multiple choice questions, the first category happens to be correct answer, and the second category wrong answer.