search

cunigarro / e-learning-js

E-learning js library was created with the promise to 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 us set data easily on e-learning platform like Blackboard and Moodle.
https://cunigarro.github.io/e-learning-js/
MIT License
22 stars 8 forks source link
css e-learning html javascript

readme

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:

npm install e-learning-js

Module:

Common js:

require('e-learning-js');

Import ES6:

import 'e-learning-js';

Import SASS:

@import '~e-learning-js/dist/e-learning-js.min.css';

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

<ul class="questions-container">
  <li>
    ¿Question one?: <input type="text">
  </li>
  <li>
    ¿Question two?: <input type="text">
  </li>
  <li>
    ¿Question three?: <input type="text">
  </li>
</ul>

<button class="check-answers-button">
  Check
</button>

<button class="reset-answers-button">
  Reset
</button>

<button class="answer-answers-button">
  Answers
</button>
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

<ul class="number_list select_activity questions-container">
  <li data-question='1'>
      <div data-option='1'>A</div>
      <div data-option='2'>B</div>
      <div data-option='3'>C</div>
      <div data-option='4'>D</div>
  </li>
  <li data-question='2'>
      <div data-option='1'>E</div>
      <div data-option='2'>F</div>
      <div data-option='3'>G</div>
      <div data-option='4'>H</div>
  </li>
  <li data-question='3'>
      <div data-option='1'>I</div>
      <div data-option='2'>J</div>
      <div data-option='3'>K</div>
      <div data-option='4'>L</div>
  </li>
</ul>

<button class="check-answers-button">
  Check
</button>

<button class="reset-answers-button">
  Reset
</button>

<button class="answer-answers-button">
  Answers
</button>
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

<ul class="questions-container">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing <span data-question="1" class="box"></span>.</li>
  <li>Ut pharetra nisl et lectus pretium <span data-question="2" class="box"></span>.</li>
  <li>Nunc sollicitudin eros vel eros tristique <span data-question="3" class="box"></span>.</li>
</ul>

<ul class="answers-container">
  <li class="box_answer_content">
    <div class="box answer_par" data-option="1">rutrum</div>
  </li>
  <li class="box_answer_content">
    <div class="box answer_par" data-option="2">elit</div>
  </li>
  <li class="box_answer_content">
    <div class="box answer_par" data-option="4">venenatis</div>
  </li>
</ul>

<button class="check-answers-button">
  Check
</button>

<button class="reset-answers-button">
  Reset
</button>

<button class="answer-answers-button">
  Answers
</button>
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

<ol class="word_list questions-container">
  <li>Question 1:
    <ol data-question="1" class="no_list">
      <li>
        <input data-option="option_1" value="1" type="radio" name="option_1"/><label for="option_1_1"><i class="fa"></i></label> Answer option 1.
      </li>
      <li>
        <input data-option="option_2" value="2" type="radio" name="option_1"/><label for="option_1_1"><i class="fa"></i></label> Answer option 2
      </li>
      <li>
        <input data-option="option_3" value="3" type="radio" name="option_1"/><label for="option_1_1"><i class="fa"></i></label> Answer option 3
      </li>
      <li>
        <input data-option="option_4" value="4" type="radio" name="option_1"/><label for="option_1_1"><i class="fa"></i></label> Answer option 4
      </li>
    </ol>
  </li>
  <li>Question 2:
    <ol data-question="2" class="no_list">
      <li>
        <input data-option="option_1" value="1" type="radio" name="option_2"/><label for="option_2_1"><i class="fa"></i></label> Answer option 1
      </li>
      <li>
        <input data-option="option_2" value="2" type="radio" name="option_2"/><label for="option_2_2"><i class="fa"></i></label> Answer option 2
      </li>
      <li>
        <input data-option="option_3" value="3" type="radio" name="option_2"/><label for="option_2_3"><i class="fa"></i></label> Answer option 3
      </li>
      <li>
        <input data-option="option_4" value="4" type="radio" name="option_2"/><label for="option_2_4"><i class="fa"></i></label> Answer option 4
      </li>
    </ol>
  </li>
  <li>Question 3:
    <ol data-question="3" class="no_list">
      <li>
        <input data-option="option_1" value="1" type="radio" name="option_3"/><label for="option_3_1"><i class="fa"></i></label> Answer option 1
      </li>
      <li>
        <input data-option="option_2" value="2" type="radio" name="option_3"/><label for="option_3_2"><i class="fa"></i></label> Answer option 2
      </li>
      <li>
        <input data-option="option_3" value="3" type="radio" name="option_3"/><label for="option_3_3"><i class="fa"></i></label> Answer option 3
      </li>
      <li>
        <input data-option="option_4" value="4" type="radio" name="option_3"/><label for="option_3_4"><i class="fa"></i></label> Answer option 4
      </li>
    </ol>
  </li>
</ol>

<button class="check-answers-button">
  Check
</button>

<button class="reset-answers-button">
  Reset
</button>

<button class="answer-answers-button">
  Answers
</button>
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

<ol class="questions-container">
  <li class="question_text">Question 1:
    <ol class="no_list" data-question="1">
      <li><input type="checkbox" value="1" data-option="option_1"/><label for="option_1_1"><i class="fa"></i></label> Answer option 1.</li>
      <li><input type="checkbox" value="2" data-option="option_2"/><label for="option_1_2"><i class="fa"></i></label> Answer option 2.</li>
      <li><input type="checkbox" value="3" data-option="option_3"/><label for="option_1_3"><i class="fa"></i></label> Answer option 3.</li>
      <li><input type="checkbox" value="4" data-option="option_4"/><label for="option_1_4"><i class="fa"></i></label> Answer option 4.</li>
      <li><input type="checkbox" value="5" data-option="option_5"/><label for="option_1_5"><i class="fa"></i></label> Answer option 5.</li>
    </ol>
  </li>
  <li class="question_text">Question 2:
    <ol class="no_list" data-question="2">
      <li><input type="checkbox" value="1" data-option="option_1"/><label for="option_2_1"><i class="fa"></i></label> Answer option 1.</li>
      <li><input type="checkbox" value="2" data-option="option_2"/><label for="option_2_2"><i class="fa"></i></label> Answer option 2.</li>
      <li><input type="checkbox" value="3" data-option="option_3"/><label for="option_2_3"><i class="fa"></i></label> Answer option 3.</li>
      <li><input type="checkbox" value="4" data-option="option_4"/><label for="option_2_4"><i class="fa"></i></label> Answer option 4.</li>
    </ol>
  </li>
  <li class="question_text">Question 3:
    <ol class="no_list" data-question="3">
      <li><input type="checkbox" value="1" data-option="option_1"/><label for="option_3_1"><i class="fa"></i></label> Answer option 1.</li>
      <li><input type="checkbox" value="2" data-option="option_2"/><label for="option_3_2"><i class="fa"></i></label> Answer option 2.</li>
      <li><input type="checkbox" value="3" data-option="option_3"/><label for="option_3_3"><i class="fa"></i></label> Answer option 3.</li>
      <li><input type="checkbox" value="4" data-option="option_4"/><label for="option_3_4"><i class="fa"></i></label> Answer option 4.</li>
    </ol>
  </li>
</ol>

<button class="check-answers-button">
  Check
</button>

<button class="reset-answers-button">
  Reset
</button>

<button class="answer-answers-button">
  Answers
</button>
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

<ul class="questions-container">
  <li data-question="1">
    Question 1:
    <span><input type="radio" value="1" data-option="option_1" name="option_1"/><label for="option_1_1"><i class="fa"></i></label> (T)</span>&nbsp;
    <span><input  type="radio" value="2" data-option="option_2" name="option_1"/><label for="option_1_2"><i class="fa"></i></label> (F)</span>
  </li>
  <li data-question="2">
    Question 2:
    <span><input type="radio" value="1" data-option="option_1" name="option_2"/><label for="option_2_1"><i class="fa"></i></label> (T)</span>&nbsp;
    <span><input type="radio" value="2" data-option="option_2" name="option_2"/><label for="option_2_1"><i class="fa"></i></label> (F)</span>
  </li>
  <li data-question="3">
    Question 3:
    <span><input type="radio" value="1" data-option="option_1" name="option_3"/><label for="option_3_1"><i class="fa"></i></label> (T)</span>&nbsp;
    <span><input type="radio" value="2" data-option="option_2" name="option_3"/><label for="option_3_2"><i class="fa"></i></label> (F)</span>
  </li>
</ul>

<button class="check-answers-button">
  Check
</button>

<button class="reset-answers-button">
  Reset
</button>

<button class="answer-answers-button">
  Answers
</button>
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

<table class="questions-container">
  <tr>
    <th colspan="2">Colocar imágenes</th>
  </tr>
  <tr>
    <td class="center"><span data-question="1" class="box_img"></span></td>
    <td class="center"><span data-question="2" class="box_img"></span></td>
  </tr>
  <tr>
    <td class="center"><span data-question="3" class="box_img"></span></td>
  </tr>
</table>

<table class="answers-container">
  <tr>
    <th colspan="2">Images list:</th>
  </tr>

  <tr>
    <td class="box_answer_content">
      <div data-option="1" class="box_img answer_par">
        <img src="http://via.placeholder.com/200x200" alt="">
      </div>
    </td>
    <td class="box_answer_content">
      <div data-option="2" class="box_img answer_par">
        <img src="http://via.placeholder.com/200x200" alt="">
      </div>
    </td>
  </tr>
  <tr>
    <td class="box_answer_content">
      <div data-option="3" class="box_img answer_par">
        <img src="http://via.placeholder.com/200x200" alt="">
      </div>
    </td>
  </tr>
</table>

<button class="check-answers-button">
  Check
</button>

<button class="reset-answers-button">
  Reset
</button>

<button class="answer-answers-button">
  Answers
</button>
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

<ul class="questions-container">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing
  <select class="input_select">
    <option value="" selected></option>
    <option value="1">elit</option>
    <option value="2">justo</option>
    <option value="3">nisi</option>
  </select>
  .</li>
  <li>
    Praesent nisi quam, maximus non dui vel, venenatis rhoncus
    <select class="input_select">
      <option value="" selected></option>
      <option value="1">elit</option>
      <option value="2">justo</option>
      <option value="3">nisi</option>
    </select>
    .
  </li>
  <li>
    Curabitur a tristique
    <select class="input_select">
      <option value="" selected></option>
      <option value="1">elit</option>
      <option value="2">justo</option>
      <option value="3">nisi</option>
    </select>
    .
  </li>
</ul>
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]
});