amrdraz / kodr-front Goto Github PK

0.0 4.0 1.0 6.8 MB

The front end of my masters project kodr

JavaScript 25.92% HTML 1.14% CSS 0.09% Python 72.60% Groff 0.11% Visual Basic 0.01% R 0.02% PLSQL 0.12% Shell 0.01%

kodr-front's Introduction

Kodr-front

This is the front end of the Kodr project backend Kodr is an online gamified learning system that teaches programing concepts. It does so through engaging students in challenges.

Users learn by partaking in challenges and following Quests which gives them experience, awarding them achivements.

Achievements showcase what the student learned and can be used to guide his learning process.

While running the challenges also track the user's behaviro patterns inside the challenge and ask about his flow state after every challenge.

####Supported Challenges

Kodr takes advantage of EmberJS's components and MongoDB's Mixed type by allowing a generic challenge system, ie a challenge can be anything.

Currently the existing challenge types are code specific and the supported languages are (Javascript, Python and Java), evaluated using bdd styled tests.

That said javascript and python are run client side while Java is run on the server side

At the time of writing this the system focuses solely on supporting python challanges (which include a step back debugger) and the server was set to not run the Java server which evaluated the java code. Javascript challenges are also out of date.

Prerequisites

You will need the following things properly installed on your computer to run and develop the front end of the project in addition to running the backend.

Installation

In your developemnt folder of choice on your computer

git clone https://github.com/amrdraz/kodr-front.git
cd kodr-front
npm install
bower install

If you don't already have the backend part of the project

cd ..
git clone https://github.com/amrdraz/kodr.git
cd kodr
npm install you may need to sudo npm install depending on your setup

see the backend repo for more on the backend dependencies, also note that the backend has one dependency for the email templates that will cause problems if you're on node 4+ this project uses node 12.7 will figure out something when I get the chance tho.

Running / Development

run to terminal sessions (tabs) one for the backend and one for the front
In the backend folder kodr node server.js or if you have nodemon prefered nodemon server.js
In the another termainl window go to the front end folder kodr-front and
ember serve --proxy http://localhost:9000
Visit the app in the browser at http://localhost:4200.

Adding your own custom challenges

We use the ember-cli pod sturcture for the challenges

An example to generate one do ember g component challenge/python/challenge-edit-python -p ember g component challenge/python/challenge-trial-python -p ember g component challenge/python/challenge-settings-python -p

Every challenge has an edit component for creating the challenge and editing it, a trial component for what the user sees, and a settings component for extra settings that are challenge specific (API no stable and coudl change)

you will find the project has 3 challenge types at the moment [javascript, python, and java] use those as a starting point for the current convension.

Make use of the many generators for generating other components and mixins to aid your code, type ember help generate for more details or visit the ember-cli project

Running Tests

there are currently no front end tests all tests are empty someon shoudl do something about this.

ember test
ember test --server

Building

ember build (development)
ember build --environment=production (production)
copy the brython folder in root and replace it with the brython folder in the dist folder
copy the dist folder content to the kodr backend app folder

####Alternativly

Run build.sh from the termainal ./build.sh after you give it execution permission

Deploying

After building add the output that you get in dist to the app folder in the backend and deploy the backend

I use git to deploy on a virtual server running on digital ocean with nginx handeling the http and a poroxy to the backend app.

kodr-front's People

Contributors

Watchers

Forkers

mbelraka

kodr-front's Issues

flow question pop up freezes

sometimes the follow question pop up freezes when questions are not answered, maybe come up with another means than throwing another pop up

should integrate some of od's game challenges

currently in need of an edit view and a means of evaluating the different problems as well as creating additional assets

Reference lookup

A reference of the python syntax and common functions should be accessible during challenges.

This is needed to log when players access resource.

The option of locking the reference lookup in the future

Logging problem solving

In the simulation game study they logged students problem solving behaviour patterns

The states where

Solution development: the students typed the codes or modified the codes in the program panel.
Experiment: the students applied the simulation function of the game (ran the program) to verify the behaviour of the programs they developed.
Solution review: the students opened the program panel to review the program they developed without typing or modifying any of the program code.
Solution reuse: the students copied code segments in the tutorial or in the programs, which they had already developed, to generate new solutions.
Reading tutorial: The students retrieved existing examples, knowledge related to generic computational problem solving, or information about the building blocks in the tutorial.

setup brython challenge

we should be capable of running python challenges

Have buggy code version of solution to display at start of challenge optionally

This would entail adding a new attribute to the challenge model (should eventually set up a form of meta Mixed type object as attribute in order to allow a diverse set of challenges)

I should be able to export and import arenas and challanges

Since it seems we will be doing this a lot some form of import and export of challenges should take place

I'm thinking a custom markdown format that is parsed

Edit User Flags

Admin should be able to view and edit user flags

Flags are used to trigger the activation of features, the admin should be able to CRUD these flags in order

import sometimes stops working

Sometimes import stops working, this is remedied by refreshing the page

the reason and means of reproducing this is yet unknown

Show user challenge history

show user activity and challenge history

primarily results in challenges, session breakdown and learning curve

python challenge test

We should be able to test python challenges

this would take creating a means of testing code submission potentially matching that of other,we would need to override the input function to read from some input stream
we will also need to setup a means of running (eval) the python code preferably multiple times.

A good challenge method may be to have the user define functions and append our test code at the end calling the function the user defined

perhaps the best method is to save the code in a variable _$code containing the user code
introduce a method

Test.exec_with_input(_$code, "input\nsperated by new line", printOut)

such that while capturing output of program in printOut similar a bit to the java challenge

the run Test.assert etc on it which builds a report object to return to the test

Test don't show errors if there is a problem with solution

when running tests if an error occurs due to the solution code it is not reported but instead nothing shows which is not very ser friendly

Logging Behaviors

A set of behaviors while problem solving should be logged
These behaviors are

writing code
thinking
erasing code
undo

idle

running code
errors after run
successful after run

copying

debugging
stopped debugging

time it takes to complete challenge

all events that are repetitive can be be summed up and saved together
so writing starttime followed by end time
then another writing event is fired shortly after should be concatenated with the previous event

make it so that runtime errors highlighted in editor while debugging appear latter

currently the debugger will throw the error once it occurs which displays it immediately
this may stop users from stepping thinking they can't
a suggestion is to postpone showing the error until the end of the debugging session when the error is reached.

also handle how infinit loop errors should show up

Tests should have a suite

In order to format some of the tests results

Measuring Flow

After each challenge completion I should ask 2 question

a) How challenging did you find the last activity
b) were your skills appropriate for understanding this last activity

a 3rd question could be whether they were assisted by a TA or Colleague during this challenge

challenge save doesn't work

the save button doesn't work on already saved challenges (I have an idea why)

however it is not a critical problem as simply running tests saves the challenge so it's not a high priority to fix

Python Console

Add a python console for fast testing

also log using the console

Add user property which enables and disables features

The property should be set at some point on sign up or when an "experiment" is started

the property is essentially a set of flags that parts of the system can check for and should they exist enable or disable certain behavior

This will be used to enable and disable debugging vs coding from scratch chalanges

Questionnaire challenge

I need to create a questionnaire challenge for the post and pre test
as well as occasional assessment at the end or arenas.

I'm now talking about to types of challenges a single code question with multiple choice administered as a single challenge
and a multiple question form maybe use form js to edit it and build it, this is used for questions like the motivation survey

challenges should move to having types