@citolab tspci-examples

Example PCI's created with @citolab/tspci

github | npm

There are 4 examples in this repository that can give a head start while creating new Portable Custom Interactions. To run these examples go the to folder of the specific example and run:

npm i
npm run dev

tspci-hello-world

There should alwas be a 'hello world' example. So here it is: the most basic example of an PCI.

• Displaying 'Hello world'

tspci-vanilla-js

Very basic implementation of a PCI where the test-taker can interact.

• Texts and size can be configured
• Image is bundled in output file

tspci-color-proportions

PCI where the test-taker can color parts of a rectangle.

• Colors, size, scalable can be configured
• Uses tailwind for styling
• Item-author can provide the correct answer in TAO
• Scores automatically based on proportions

tspci-hauntedjs

Example PCI using haunted instead of preact.

Simple PCI for finding the correct variable

tspci-3d-blocks

PCI where the test-taker has to build a blocks.

• gridDivisions and pixel size of boxes can be configured
• Uses three.js orbitcontrols to render the 3d boxes and is bundled in the PCI output file.
• Uses tailwind for styling
• Item-author can provide the correct answer in TAO
• Scores automatically based on front, side and to view.