E-learning Js 0.1 (Alpha 1)

E-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.

List of activities:

Each design has a default design but you can also replace the images to fit your design.

These are the following activities:

1. Multiple choice


2. Select


3. Drag and drop


4. Multiple unique answer


5. Multiples answers


6. False and True


7. Drag and drop images


8. Accordion select

Installation:

Npm:

``sh
npm install e-learning-js
`

Module:

Common js:

`javascript
require('e-learning-js');
`

Import ES6:

`javascript
import 'e-learning-js';
`

Import SASS:

`scss
@import '~e-learning-js/src/scss/e-learning-js';
`

Usage:

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.

Multiple choice

`html


• 
  ¿Question one?:
  


• 
  ¿Question two?:
  


• 
  ¿Question three?:
  


Check



Reset



Answers

`

`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']
]
});
`

Select

`html


• 
  
  A
  
  
  B
  
  
  C
  
  
  D
  
  


• 
  
  E
  
  
  F
  
  
  G
  
  
  H
  
  


• 
  
  I
  
  
  J
  
  
  K
  
  
  L
  
  


Check



Reset



Answers

`

`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]
});
`

Drag and drop

`html


• Lorem ipsum dolor sit amet, consectetur adipiscing .


• Ut pharetra nisl et lectus pretium .


• Nunc sollicitudin eros vel eros tristique .

• 
  
  rutrum
  
  


• 
  
  elit
  
  


• 
  
  venenatis
  
  


Check



Reset



Answers

`

`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]
});
`

Multiple unique answer

`html


1. Question 1:
   
   
   
   1. 
      Answer option 1.
      
   
   
   2. 
      Answer option 2
      
   
   
   3. 
      Answer option 3
      
   
   
   4. 
      Answer option 4
      
   
   
   
   


2. Question 2:
   
   
   
   1. 
      Answer option 1
      
   
   
   2. 
      Answer option 2
      
   
   
   3. 
      Answer option 3
      
   
   
   4. 
      Answer option 4
      
   
   
   
   


3. Question 3:
   
   
   
   1. 
      Answer option 1
      
   
   
   2. 
      Answer option 2
      
   
   
   3. 
      Answer option 3
      
   
   
   4. 
      Answer option 4
      
   
   
   
   


Check



Reset



Answers

`

`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]
});
`

Multiples answers

`html


1. Question 1:
   
   
   
   1. Answer option 1.
   
   
   2. Answer option 2.
   
   
   3. Answer option 3.
   
   
   4. Answer option 4.
   
   
   5. Answer option 5.
   
   
   
   


2. Question 2:
   
   
   
   1. Answer option 1.
   
   
   2. Answer option 2.
   
   
   3. Answer option 3.
   
   
   4. Answer option 4.
   
   
   
   


3. Question 3:
   
   
   
   1. Answer option 1.
   
   
   2. Answer option 2.
   
   
   3. Answer option 3.
   
   
   4. Answer option 4.
   
   
   
   


Check



Reset



Answers

`

`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]
]
});
`

False and True

`html


• 
  Question 1:
  (T) 
  (F)
  


• 
  Question 2:
  (T) 
  (F)
  


• 
  Question 3:
  (T) 
  (F)
  


Check



Reset



Answers

`

`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]
});
`

Drag and drop images

`html


Images list:


Check



Reset



Answers

`

`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]
});
`

Accordion select

`html


• Lorem ipsum dolor sit amet, consectetur adipiscing
  
  
  elit
  justo
  nisi
  
  .


• 
  Praesent nisi quam, maximus non dui vel, venenatis rhoncus
  
  
  elit
  justo
  nisi
  
  .
  


• 
  Curabitur a tristique
  
  
  elit
  justo
  nisi
  
  .
  

`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]
});
``