![\"1EdTech](\"https://site.imsglobal.org/sites/default/files/media/images/logo_ims/1edtech_trusted-apps-certified.svg\"){kind=logo}
\r\n\r\n\r\n\r\nThe Amp-up.io QTI 3 Player Component (\"QTI 3 Player\") is a 100% JavaScript component that aims to encapsulate the best practices and behaviors of the IMS Global/1EdTech QTI 3 Assessment Item specification. A conforming QTI 3 authoring or exporting system can construct a QTI 3 Item XML solution that will \"play\" authentically and reliably in the QTI 3 Player - according to the Best Practices Implementation Guide which can be found here:\r\n\r\n[1EdTech QTI v3 Best Practices and Implementation Guide](https://www.imsglobal.org/spec/qti/v3p0/impl)\r\n\r\nQTI 3 Player has achieved both QTI 3 Basic and QTI 3 Advanced \"Delivery\" Conformance Certification from 1EdTech. Furthermore, QTI 3 Player supports many so-called \"Elective\" capabilities that go beyond Advanced delivery conformance.\r\n\r\nFor a complete list of the QTI3 XML elements supported by the QTI 3 Player component, please refer to the [QTI 3 Player Item Reference](https://docs.google.com/document/d/1KCImUAk-2uBqSOHRO1lJa1orrzF4b8cl/#heading=h.gjdgxs).\r\n\r\n\r\n\r\n## About The Project\r\n\r\nThe QTI 3 Player has API's, interfaces, and capabilities which are optimized for formative or classroom assessment settings. Such settings typically require sophisticated QTI features such as adaptive items, item templating (sometimes called item \"cloning\"), template processing, and full response processing; i.e., scoring. The QTI 3 Player implements the full expressive QTI 3 Item XML vocabulary according to best practices. Consequently, you don't have to know anything about QTI. Just install the component in your project, inject XML, and go! In the following demo, a \"TestRunner\" application embeds the QTI 3 Player component for Item Rendering.\r\n\r\nView TestRunner Demo\r\n\r\nThumbnails of Items/Rendering
\r\n\r\n![](\"https://user-images.githubusercontent.com/898605/158195206-4f82d851-f3f0-47f6-9756-fbee098c7dcf.png\")
\r\n![](\"https://user-images.githubusercontent.com/898605/158033033-dbb00c44-6d95-4ec0-9591-9d3459fcc1b8.png\")
\r\n![](\"https://user-images.githubusercontent.com/898605/158033144-d19063f0-43c4-48e4-a2d1-6e4de6439fc9.png\")
\r\n![](\"https://user-images.githubusercontent.com/898605/158032910-d739e359-c248-4bad-be30-935bb23aa6ff.png\")
\r\nExample of QTI 3 Player Glossary Dialog
\r\n![](\"https://user-images.githubusercontent.com/898605/161848852-6cec8b3d-f843-403c-a651-99b284946f65.png\")
\r\nAn abbreviation.
\"\",\r\n * properties: {\r\n * name: \"qti-html-content\"\r\n * }\r\n * }\r\n * }\r\n * ... additional Card supports in Catalog based on PNP ...\r\n * ]\r\n * }\r\n */\r\n handleItemCatalogEvent (event) {\r\n console.log('[ItemCatalogEvent][Type: ' + event.type + ']', event)\r\n switch (event.type) {\r\n case 'glossary':\r\n // Do something!\r\n break\r\n default:\r\n }\r\n },\r\n```\r\n\r\n#### Supported Keyword Translation Language Codes ####\r\n\r\nQTI 3 Player groups PNP 'glossary-on-screen', 'keyword-translation', and 'ext:sbac-glossary-illustration' supports into 'glossary' events that will trigger a Catalog event of type 'glossary'.\r\n\r\nAs of the 0.3.4 release, QTI 3 Player supports the following IS0 639 language codes for keyword translations:\r\n\r\n`{ ar | cmn | de | en | es | fr | hmn | it | ja | ko | my | nl | pa | ru | so | tl | uk | vi | yue | zh }`\r\n\r\n\r\n\r\n\r\n### 12. About Dynamic Catalog Rebinding\r\n\r\nUnder most use-cases, a PNP is passed into QTI 3 Player as part of the configuration (see 4b Constructing a Configuration) as an item's XML is loaded. However, _after an item is loaded_, an encapsulating application may update PNP settings and then force a catalog rebinding with the updated PNP settings. QTI 3 Player implements a `bindCatalog` API method for this use-case.\r\n\r\n```js\r\n// 1) Use the PnpFactory helper class to build an updated PNP.\r\nlet pnpFactory = new PnpFactory()\r\n// Example: turn off glossary\r\npnpFactory.setGlossaryOnScreen(false)\r\n// Example: turn on Spanish keyword translations\r\npnpFactory.setKeywordTranslationLanguage('es')\r\n// Example: turn on ext:sbac-glossary-illustration\r\npnpFactory.setExtSbacGlossaryIllustration(true)\r\n\r\n// 2) Set QTI 3 Player's current PNP to our new PNP constructed in 1) above.\r\nthis.qti3Player.setItemContextPnp(pnpFactory.getPnp())\r\n\r\n// 3) Even with a new Item Context PNP (step 2) above, QTI 3 Player will not\r\n// automatically rebind the PNP + Catalog. \r\n// Force QTI3 Player to bind (rebind) the Catalog.\r\nthis.qti3Player.bindCatalog()\r\n```\r\n\r\n\r\n\r\n\r\n## QTI 3 Player Presentation Attributes\r\n\r\nQTI 3 Player has several attributes to instrument presentation within an encapsulating application/web page. These attributes are `container-class`, `container-padding-class`, and `color-class`\r\n\r\n### container-class\r\n\r\nContainer classes are used to contain and pad content within them. QTI 3 Player comes with built-in support for two container classes: `qti3-player-container-fluid` and `qti3-player-container`.\r\n\r\n* qti3-player-container-fluid **DEFAULT**\r\n\r\n This container is a width=100%, padding=0 container at all widths.\r\n\r\n* qti3-player-container\r\n\r\n This container has responsive breakpoints at screen widths of 1200px, 980px, and 768px. \r\n\r\nExperiment with the Container Class Note: Click the \"Settings\" menu in the top-right corner of the TestRunner application.\r\n\r\n\r\n### container-padding-class\r\n\r\nContainer padding classes are for setting the padding between the QTI 3 Player container and the qti-assessment-item rendered content. QTI 3 Player comes with built-in support for six container padding classes.\r\n\r\n* qti3-player-container-padding-0 { padding: 0; } **DEFAULT**\r\n* qti3-player-container-padding-1 { padding: 0.25rem; }\r\n* qti3-player-container-padding-2 { padding: 0.5rem; }\r\n* qti3-player-container-padding-3 { padding: 1rem; }\r\n* qti3-player-container-padding-4 { padding: 1.5rem; }\r\n* qti3-player-container-padding-5 { padding: 3rem; }\r\n\r\nExperiment with the Container Padding Class Note: Click the \"Settings\" menu in the top-right corner of the TestRunner application.\r\n\r\n\r\n### color-class\r\n\r\nQTI 3 Player has built-in support for 14 foreground / background color combinations (a.k.a. color \"themes\") in accordance with best practices for many forms of color blindness or other visual impairments. In addition to setting a colorClass in a PNP, color settings may also be applied dynamically.\r\n\r\n* qti3-player-color-default **DEFAULT**\r\n* qti3-player-color-defaultreverse (Default - Reverse Polarity)\r\n* qti3-player-color-blackwhite (High Contrast - foreground color: black, background color: white)\r\n* qti3-player-color-whiteblack (High Contrast - foreground color: white, background color: black)\r\n* qti3-player-color-blackrose (foreground color: black, background color: rose)\r\n* qti3-player-color-roseblack (foreground color: rose, background color: black)\r\n* qti3-player-color-dgraymgray (foreground color: dark gray, background color: medium gray)\r\n* qti3-player-color-mgraydgray (foreground color: medium gray, background color: dark gray)\r\n* qti3-player-color-yellowblue (foreground color: yellow, background color: blue)\r\n* qti3-player-color-blueyellow (foreground color: blue, background color: yellow)\r\n* qti3-player-color-blackcyan (foreground color: black, background color: lblue)\r\n* qti3-player-color-cyanblack (foreground color: lblue, background color: black)\r\n* qti3-player-color-blackcream (foreground color: black, background color: lemonchiffon)\r\n* qti3-player-color-creamblack (foreground color: lemonchiffon, background color: black)\r\n\r\nExperiment with the Color Class Note: Click the \"Settings\" menu in the top-right corner of the TestRunner application.\r\n\r\n\r\n\r\n\r\n\r\n\r\n## Roadmap\r\n\r\nThe QTI3 Item Player 2022-2025 development roadmap includes all features and capabilities included in QTI 3 Delivery System \"Basic\" and \"Advanced\" conformance + PCI support.\r\n\r\n- [x] Support for the 14 Standard Color Combinations/Themes\r\n- [x] Support for Template Processing and all Template Rules\r\n- [x] Support for Template Math Variables\r\n- [x] Support for Response Processing and all Response Processing Rules\r\n- [x] Support for Smarter Balanced-style Choice Interaction\r\n- [x] Support for Smarter Balanced-style Audio player\r\n- [x] Support for Adaptive Items and QtiEndAttemptInteraction\r\n- [x] Catalog Support for Glossary and Keyword Translation\r\n- [x] Catalog Support for Smarter Balanced Illustrated Glossary\r\n- [x] Rubric Block Support\r\n- [x] QtiStylesheet Support\r\n- [x] Shared Stimulus Support\r\n- [x] QtiMatch Interaction Support\r\n- [x] QtiGapMatch Interaction Support\r\n- [x] QtiGraphicGapMatch Interaction Support\r\n- [x] QtiHottext Interaction Support\r\n- [x] QtiHotspot Interaction Support\r\n- [x] QtiOrder Interaction Support\r\n- [x] QtiPortableCustom Interaction Support\r\n- [x] QtiSelectPoint Interaction Support\r\n- [x] QtiMediaInteraction Support\r\n- [x] Scoring API Examples\r\n- [x] Support for Interaction \"Review\" Status\r\n- [x] Improved Audio Player\r\n- [x] Improved Video Player\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## License\r\n\r\nDistributed under the MIT License. See `LICENSE` for more information.\r\n\r\n\r\n\r\n\r\n\r\n## Built With\r\n\r\nThe QTI3 Item Player is built with the Vue.js (v2.6) framework.\r\n\r\n* [Vue.js](https://vuejs.org/)\r\n\r\n\r\n\r\n\r\n\r\n\r\n## Contact\r\n\r\nPaul Grudnitski - paul.grudnitski@amp-up.io\r\n\r\nProject Link: [https://github.com/amp-up-io/qti3-item-player](https://github.com/amp-up-io/qti3-item-player)\r\n\r\n\r\n\r\n\r\n\r\n\r\n## Acknowledgments\r\n\r\nThis component would not be possible were it not for a fortuitous decision by the aQTI Task Force (the original name of the QTI 3 Working Group) - meeting at CITO headquarters in Arnhem, NE, January 2015 - to make the aQTI / QTI 3 specification \"web component friendly\". \r\n\r\n\r\n\r\n\r\n[license-shield]: https://img.shields.io/github/license/amp-up-io/qti3-item-player?label=License&style=for-the-badge\r\n[license-url]: https://github.com/amp-up-io/qti3-item-player/blob/main/LICENSE\r\n","readmeFilename":"README.md"}