E-learning js library was created with the promise for help to create activities for e-learning courses that can return data about evaluation and time. It is will be based on a standard called SCORM that let me us set data easily on e-learning platform li
npm install e-learning-jsE-learning Js is licensed under a MIT License.
Actually this library is an entire demo, feel free to download and use it on any project.
Each design has a default design but you can also replace the images to fit your design.
These are the following activities:
``sh`
npm install e-learning-js
`javascript`
require('e-learning-js');
`javascript`
import 'e-learning-js';
`scss`
@import '~e-learning-js/src/scss/e-learning-js';
You need to follow the next html structure for each activity and add javascript parameters for each of one.
Add the css file e-learning_activities_0.1.css inside the head tag and the js file e-learning_activities_0.1.js inside the body tag before close it.
`html
¿Question one?:
¿Question two?:
¿Question three?:
`
`javascript`
create_multiple_choice({
questions_html: '.questions-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
// Multiples options of answer for each question
answers: [
['answer-1-1', 'answer-1-2', 'answer-1-3'],
['answer-2-1', 'answer-2-2'],
['answer-3-1', 'answer-3-2']
]
});
`html
A
B
C
D
E
F
G
H
I
J
K
L
`
`javascript`
create_select({
questions_html: '.questions-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
answers: [3, 4, 2]
});
`html
`
`javascript`
create_drag_drop({
options_html: '.questions-container',
questions_html: '.answers-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
answers: [2, 1, 3]
});
`html
Answer option 1.
Answer option 2
Answer option 3
Answer option 4
Answer option 1
Answer option 2
Answer option 3
Answer option 4
Answer option 1
Answer option 2
Answer option 3
Answer option 4
`
`javascript`
create_multiple_unique_asnwers({
questions_html: '.questions-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
answers: [1, 2, 4]
});
`html
`
`javascript`
create_multiple_answers({
questions_html: '.questions-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
answers: [
[1, 3, 4, 5],
[3, 4],
[1, 3, 4]
]
});
`html
Question 1:
(T)
(F)
Question 2:
(T)
(F)
Question 3:
(T)
(F)
`
`javascript`
create_false_true({
questions_html: '.questions-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
answers: [1, 2, 1, 1]
});
`html
Colocar imágenes
| Images list: | |
|---|---|
`
`javascript`
create_drag_drop_images({
options_html: '.questions-container',
questions_html: '.answers-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
answers: [1, 3, 2]
});
`html`
.
Praesent nisi quam, maximus non dui vel, venenatis rhoncus
.
Curabitur a tristique
.
`javascript``
create_accordion_select({
options_html: '.questions-container',
questions_html: '.answers-container',
check_button: '.check-answers-button',
reset_button: '.reset-answers-button',
answer_button: '.answer-answers-button',
answers: [2, 1, 3]
});