<center>![logo.png](https://i.postimg.cc/jSj7LDn2/logo.png)</center>

E-learning library was created with the promise to help to create activities for e-learning courses that can return data about score and time, and improve the experience of evaluation from the virtuality of the class room.

I'm back to this project and I hope to evolve it and get a stable library. I have great plans for this project and Steem. You can follow development  in the next link: [Link to Project](https://github.com/cunigarro/e-learning-js).

This release was based of three improvements:

1. ES Lint audit based on Airbnb Javascript recommendations
2. Improve design qualities.
3. Better use for import in css and javascript.

# 1. ES Lint audit based on Airbnb Javascript recommendations

<div class="pull-left">
Airbnb has an excellent <a href="https://github.com/airbnb/javascript">style guide for javascript</a> and I adde this audit to this project with Es Lint. Mainly is the implementation of the last standard for javascript, in this case Ecmascript 2018 (ES8). Now you can use last javascript standard (ES8): arrow functions, destructuring, const, let, literal templates, import, export and classes with the audit of airbnb.

It will improve the understanding for code and let you to join to the project following some rules to make the code more readable for all contributors.
</div>

<div class="pull-right">
https://i.postimg.cc/SKmMSW0T/Screen-Shot-2019-02-01-at-10-09-19-PM.png
</div>

<hr>
<div class="clearfix">
To ES Lint audit run the next commands in the root to the project:

1. Install dependencies `npm install`.
2. Run `eslint ./src/js/activities/*.js`
3. Review problems and solve it.
</div>


# 2. Improve design qualities

I improve design qualities suggested in the before post about e-learning js here in steemit.

* Show message when click on Check without set an answer.

[![fix-it.png](https://i.postimg.cc/prV9xvgm/fix-it.png)](https://postimg.cc/mzqZNvZ4)

<hr>

<center>
[![fix-1-2.gif](https://i.postimg.cc/YC2w39QG/fix-1-2.gif)](https://postimg.cc/kBHZM71q)
</center>

* The design is broken when the answer is wrong.

[![fix-it-2.png](https://i.postimg.cc/0jtzy3sc/fix-it-2.png)](https://postimg.cc/V0Cf7K5C)

<center>
[![fix-2-1.gif](https://i.postimg.cc/cCGp84sJ/fix-2-1.gif)](https://postimg.cc/BLNYr3PW)
</center>

<hr>

* The crosses aren't on the same line height as the text.

[![fix-it-4.png](https://i.postimg.cc/vBTFdS0Q/fix-it-4.png)](https://postimg.cc/TyzHVQ8S)

<hr>

<center>
[![fix-3.gif](https://i.postimg.cc/Y01h19YD/fix-3.gif)](https://postimg.cc/D4wvh7C1)
</center>

*  I can add multiple answers in a drop and drap that's weird. And the line height is not the same when I have an answer or no answer at all. The text inside the yellow box is not centered.

[![fix-it-5.png](https://i.postimg.cc/cCtpvtq2/fix-it-5.png)](https://postimg.cc/n9ZR5zhG)

<hr>

<center>
[![fix-4.gif](https://i.postimg.cc/NjVBjtrK/fix-4.gif)](https://postimg.cc/sMptTtmz)
</center>

*  If I add images in the same field I can't go back or reset until I check.

[![fix-it-6.png](https://i.postimg.cc/Ls66nDxW/fix-it-6.png)](https://postimg.cc/yDtzGm4h)

<hr>

<center>
[![fix-6.gif](https://i.postimg.cc/1zZ7H7kW/fix-6.gif)](https://postimg.cc/v43v8hH9)
</center>

<hr>

Finally, you can validate this fixes in the next [link](https://cunigarro.github.io/e-learning-js/), where you can interact with the library.

# 3. Better use for import in css and javascript

This is a simple fix but  you can now call the library with import in js and css, with the next commands:

**Common js:** `require('e-learning-js');`

**Import ES6 js:** `import 'e-learning-js';`

**Import sass (css):** `@import '~e-learning-js/dist/e-learning-js.min.css';`

<hr>

**Proof of Work Done**
Github account: [https://github.com/cunigarro](https://github.com/cunigarro)
Pull Request: [link to Pull Request](https://github.com/cunigarro/e-learning-js/pull/13)

<hr/>

**See you soon Steemiants** ✋

<hr/>