This example represents SCORM-compliant question set (aka quiz)

Related tags

React scorm-quiz
Overview

HTML&JS SCORM 2004 Compliant Quiz

This example represents SCORM-compliant question set (aka quiz) and was made with Bootstrap 5 and Vanilla JS.

You may use it as a blueprint for your projects. If you like the result you may give it a star :)

USAGE

For testing purposes just download all files and add to archive (.zip). Then upload zip-file to any SCORM2004-compliant LMS (such as iSpring Learn, Learndash, Skillcast, Docebo etc.). Quiz was successfully tested on SCORM Cloud.

Editing

All html markup is situated in index.html file. CSS folder contains only Bootstrap css files.

All quiz logic is located in ./js/quiz.js. Example texts in question, answers and feedback are in Russian (sorry, folks, I'll make English translation a bit later).

Variable 'questions' is an array. Each element is an object with question, answers, correct answer and score. You may change texts as you wish, remove some questions or add them from external file.

SCORM_API_wrapper.js is pipwerks SCORM Wrapper for JavaScript created by Philip Hutchison, January 2008-2018.

You might also like...

Create Sonnat App - Set up a modern web app which is powered by Sonnat.

Create Sonnat App - Set up a modern web app which is powered by Sonnat.

Jan 31, 2022

Set up a modern web app by running one command.

Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

Oct 16, 2022

The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power apps.

The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power apps.

Power CAT code components The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power a

Jan 2, 2023

A npm package to increase the developer experience and consistency by providing a set of hooks that can be opted-in the development lifecycle.

@jeliasson/husky-hooks This npm package aims to increase the developer experience and consistency by providing a set of hooks that can be opted-in the

Dec 6, 2022

Set up a modern web app with clean architecture by running one command.

Set up a modern web app with clean architecture by running one command.

Clean React App Create React apps using Clean Architecture with no build configuration. User Guide – How to develop apps bootstrapped with Clean React

Jan 7, 2023

Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones.

Stitches Mix Set of property utilities for Stitches with theme tokens support. Use the built-in utils, or easily build custom ones. Usage To import al

Aug 8, 2022

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Dec 22, 2022

An example of a fast food ordering app with Ionic React

An example of a fast food ordering app with Ionic React

ionic-fast-food-app An example of a Food Ordering app in Ionic React Included in this Ionic React Template/UI Data fetching from JSON files Global sta

Nov 28, 2022

An example of a travel style app built with Ionic React

An example of a travel style app built with Ionic React

ionic-react-travel-app An example of a travel style app built with Ionic React If you'd like to support, you can buy me a coffee ☕️ Included in this I

Sep 27, 2022
Owner
null
Set up a modern web app by running one command.

Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

Facebook 98.4k Jan 1, 2023
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Claudéric Demers 10.3k Jan 2, 2023
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Raphaël Benitte 10.9k Dec 31, 2022
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

null 24 Dec 22, 2022
Dynamically set remote origins at runtime within hosts

external-remotes-plugin Host webpack.config const config = { ...otherConfigs plugins: [ new ModuleFederationPlugin({ name: "app1",

Module Federation 42 Nov 25, 2022
Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Mathieu Schimmerling 97 Dec 16, 2022
Named slices with slice-scoped set and get functions for Zustand

Zustand Opine Opine Definition transitive verb To state as an opinion Purpose An opinionated Zustand store. Automates naming of actions for Redux Dev

Daniel Power 11 Oct 20, 2022
Minimal Design, a set of components for Angular 9+

Alyle UI Minimal Design, a set of components for Angular. Docs Install Alyle UI Installation Components Feature State Responsive Docs avatar ✔️ ✔️ Doc

Alyle 281 Dec 25, 2022
Chat with an AI that's powered by GPT-j. Talk with it, set parameters, ask questions, and twist words

AI Chat - Open Source | Powered by GPT-j with 6 billion neurons Chat with an AI that's powered by GPT-j. Talk with it, set parameters, ask questions,

Romelianism 3 Dec 29, 2022