Documentation

Learn2Code.js is Interactive Coding Learning that provides user to learn JavaScript

Technologies

• Backend: Django
• Frontend: VueJS (Instance)
• Database: SQLite (DB file included for testing purpose)
• Styling/CSS: Argon Design System by CreativeTim
• Javascript Intrepreter: Js2Py by Piotr Dabkowski

Installation

1. pip install -r requirements.txt
2. ./manage.py runserver

Access 127.0.0.1:8000 or localhost:8000 (default Django development server) via browser

Admin

Account for testing:

url admin: 127.0.0.1:8000/admin/

username: pdso

password: practicaldso

The Admin User can do:

• Add new Lesson
• Create expected codes
• Add additional static assets (HTML, CSS, Javascript) *for Web Output
• Sort the lessons

Apps

• The Apps have 2 output type
  • console output
  • web output
• The answer_code need to click button Run to validate the answer_code
• If the code is running and correct, the Next button will be enabled and the user can take the next lesson.
• The answer code will be store/save in the session, as long as the user has clicked the button Run So if the User leaves or closed the tab (browser), the ran code will not be lost.

Data Model

Lesson

ExtraStatic (for Web Output)

ExpectedAnswer

Validation System

Code will validate and will send 3 message in popup notification:

1. Code error
2. Code run successful but incorrect based in expected answer
3. Code run successful and correct based in expected answer, and the Next Button will be enabled.

Console Output

In the console, the answer_code will execute using Js2Py and the result will validate, is the result is in the expected_answers that Admin defines in Admin Page? If correct it will show notification no. 3

Web Output

In the web output, the method uses to validate it based on answer_code without compiling. So, if the code is in the expected_answers it will correct.

---

Demo Screenshot

1 Home Page

2. Console Output Error

3. Console Output Incorrect

4. Console Output Correct

5. Web Output Incorrect

6. Web Output Correct

7. Last Lesson

In las lesson, if user corrected answer, then the next button still disabled because no next lesson

8. Home Page All Correct

When all Lesson corrected, then all button for navigate to lesson will enabled