Difference between revisions of "Foxtrot"

From mn/ifi/inf5750
Jump to: navigation, search
 
(38 intermediate revisions by 3 users not shown)
Line 2: Line 2:
  
 
*Mona Isabelle Yari (monaiy@ifi.uio.no)
 
*Mona Isabelle Yari (monaiy@ifi.uio.no)
*Peter Havgar(username@ifi.uio.no)
+
*Peter Havgar(peterkh@ifi.uio.no)
 
*Christopher Neumann Ruud (chrinr@ifi.uio.no)
 
*Christopher Neumann Ruud (chrinr@ifi.uio.no)
  
Line 53: Line 53:
 
<span style="font-family: arial, helvetica, sans-serif">This module is for monitoring a set of users during an evaluation period, through logs of their use of some of the DHIS operations.</span>
 
<span style="font-family: arial, helvetica, sans-serif">This module is for monitoring a set of users during an evaluation period, through logs of their use of some of the DHIS operations.</span>
  
== Architechture and Features ==
+
== Architechture ==
  
We will primarily use HTML5, CSS3,, Bootstrap and AngularJS in this project. We believe they will work well together and help us create the best possible solution.&nbsp;
+
We will primarily use HTML5, CSS3,, Bootstrap and jQuery in this project. We believe they will work well together and help us create the best possible solution.&nbsp;
  
 
To communicate with the DHIS2 RESTful API, AJAX and JSON will be applied.
 
To communicate with the DHIS2 RESTful API, AJAX and JSON will be applied.
Line 61: Line 61:
 
''List of technologies and frameworks we will use:''
 
''List of technologies and frameworks we will use:''
  
*JavaScript (angular)
+
*JavaScript (jQuery)
*<span style="font-size:small"><span style="color: rgb(37, 37, 37); font-family: sans-serif; line-height: 22.3999996185303px">JSON</span></span>
+
*<span style="font-size:small"><span style="color: rgb(37, 37, 37); font-family: sans-serif; line-height: 22.3999996185303px">JSON</span></span>
 
*<span style="font-size:small">CSS</span>
 
*<span style="font-size:small">CSS</span>
 
*<span style="font-size:small">HTML5</span>
 
*<span style="font-size:small">HTML5</span>
Line 68: Line 68:
 
*<span style="font-size:small">Bootstrap</span>
 
*<span style="font-size:small">Bootstrap</span>
  
=== <span style="font-size:small"></span> ===
+
== Features ==
  
<span style="font-size:small">Features</span>
+
''The application will have the following features:''&nbsp;<br/>''(Core funtionality will be priorotized)''
 
 
''The application will have the following features:''
 
  
 
*Two types of users: Normal User and Administrator
 
*Two types of users: Normal User and Administrator
 
*Creating quiz
 
*Creating quiz
 
*Taking quiz
 
*Taking quiz
 +
*Courses
 +
*Modules
 +
*Tests
 +
 +
Functinality not included in first release:
 +
 
*Score Board (for competition)
 
*Score Board (for competition)
 
*Integrated update for each user taking a quiz
 
*Integrated update for each user taking a quiz
 
*Mentoring possibilities (optional)
 
*Mentoring possibilities (optional)
 
*Forum for community of learners
 
*Forum for community of learners
*Courses
 
 
*Level system
 
*Level system
*Modules
+
*Deleting courses
*Tests
+
*Editing courses
  
 
= Time schedule =
 
= Time schedule =
  
<span style="color: rgb(37, 37, 37); font-family: sans-serif; font-size: 14px; line-height: 22.3999996185303px">Each group should follow these milestones:</span>
+
<span style="color: rgb(37, 37, 37); font-family: sans-serif; font-size: 14px; line-height: 22.3999996185303px">Each group should follow these milestones:</span>
  
 
==== Milestone 1: 01th November ====
 
==== Milestone 1: 01th November ====
  
Document features and architecture on Wiki
+
Document features and architecture on Wiki - DONE
 
 
Show understanding of DHIS2 web apps
 
 
 
  
 +
Show understanding of DHIS2 web apps - DONE
  
 
==== Milestone 2: 15th November ====
 
==== Milestone 2: 15th November ====
  
First bare-bone version - static HTML
+
First bare-bone version - static HTML - DONE
  
Uploadable as DHIS2 web app
+
Basic JS object creation - DONE
  
 +
Uploadable as DHIS2 web app - DONE and working
  
 +
Read and write to API - DONE
  
==== Milestone 3: 30th November ====
+
Read and write to API via WEB - interface - DONE
 
 
<span style="line-height: 1.5em">Finished, if applicable also with mobile app.</span>
 
  
 +
==== Milestone 3: 8th December ====
  
 +
<span style="line-height: 1.5em">Finished, if applicable also with mobile app. DONE</span>
  
 
==== Final delivery: 8th December ====
 
==== Final delivery: 8th December ====
Line 117: Line 120:
  
 
= How you are dividing tasks within the group =
 
= How you are dividing tasks within the group =
 +
 +
We worked on several of the tasks together, and had no pre-defined roles within the group.
 +
 +
However, we divided into areas of main responsibility.&nbsp;
 +
 +
Peter: Forms and dataparsing - quiz-taking-app
 +
 +
Mona: HTML, layout, CSS over all, and front-end quiz-making-app.
 +
 +
Christopher: Backend API-read and write, quiz-making-logic, git-master
  
 
= Screenshots and screen flows =
 
= Screenshots and screen flows =
 +
 +
== Quiz making app ==
 +
 +
[[File:FoxTrot-making-Step1.png|border|none|800px|First step: This is the list of courses, with the ability to create more courses or edit a course's modules]]
 +
 +
First step: This is the list of courses, with the ability to create more courses or edit a course's modules
 +
 +
<br/>[[File:FoxTrot-making-Step2.png|border|none|800px|Second step: This is the list of modules, with the ability to create more modules or edit a module's tests]]
 +
 +
Second step: This is the list of modules, with the ability to create more modules or edit a module's tests
 +
 +
<br/>[[File:FoxTrot-making-Step3.png|border|none|800px|Third step: This is the list of tests, with the ability to create more questions]]
 +
 +
Third step: This is the list of tests, with the ability to create more questions
 +
 +
== Quiz taking app ==
 +
 +
[[File:1.png|border|none|400px|First scene in the application]]
 +
 +
First scene in the application
 +
 +
[[File:Taking2.png|border|none|800px|Total screen with application(left) and site (right)]]
 +
 +
Total screen with application(left) and site (right)
 +
 +
[[File:Taking3.png|border|none|400px|Second scene in the application]]
 +
 +
Second scene in the application
 +
 +
[[File:Taking4.png|border|none|400px|Third scene in the application]]
 +
 +
Third scene in the application
 +
 +
[[File:Taking5.png|border|none|400px|fourth scene in the application]]
 +
 +
Fourth scene in the application
 +
 +
[[File:Taking6.png|border|none|400px|Fifth scene in the application]]
 +
 +
Fifth scene in the application
  
 
= Documented learning during project =
 
= Documented learning during project =
 +
 +
In this project there has been a heavy focus on Javascript as a tool. Neither of the group members has used javascript in the past to any extent, and we feel we have learned a lot about DOM manipulation, AJAX and jQuery, javascript data structures, SCOPEs and functions.
 +
 +
In assition, we have used GIT extensively throughout he project, totaling over 250 commits between us.
 +
 +
We have also learned that most web-projects, or any project that needs to work with an established API, has to resort to workarounds in some cases because the API creators never predict all possible use-cases.
 +
 +
= Known bugs and limitations =
 +
 +
* BUG: Because of some off-handing of javascript calls and asynchronous ajax-calls within jQuery Mobile, sometimes the data entered in the making - app will not persist properly.
 +
 +
*Missing Feature: Deletion and editing of data in the making app not implemented
 +
 +
*Missing Feature: Graphical progress visualization in taking - app not implemented.
  
 
= Suggested improvements to APIs etc =
 
= Suggested improvements to APIs etc =
 +
 +
We would very much like the server to handle application/json or application/xml - requests, so that everything would not have to be parsed to text/plain - Christopher
 +
 +
allow data creation apart from writing hacks into systemSettings/myKey - really dirty way of handling larger data structures - Christopher
 +
 +
/api/systemSettings.json gives 200 OK, as well as /api/systemSettings/myKey , but /api/systemSettings/myKey throws 404 errors with some GET methods in postman, for unknown reasons. The API should be tidier.
  
 
= Link to repository =
 
= Link to repository =
Line 128: Line 201:
 
Link to our git repository
 
Link to our git repository
  
<span style="color: rgb(62, 69, 76);  font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;  line-height: 15.3599996566772px;  white-space: pre-wrap;  background-color: rgb(247, 247, 247)">gitolite@git.uio.no:inf5750/chrinr/foxtrot</span>
+
gitolite@git.uio.no:inf5750/chrinr/foxtrot
 +
 
 +
[https://github.com/Christopherruud/FoxTrot https://github.com/Christopherruud/FoxTrot]
  
 
= Download link to sample web app or Android app =
 
= Download link to sample web app or Android app =
 +
 +
Quiz Maker: [https://drive.google.com/file/d/0B83hAXM_pTyOdHZ4Q1lwWFRZbTg/view?usp=sharing [1]]
 +
 +
Quiz Taker: [https://drive.google.com/file/d/0B83hAXM_pTyORF9Pc3ROdHo0aGM/view?usp=sharing [2]]

Latest revision as of 10:31, 10 December 2014

List of group members

  • Mona Isabelle Yari (monaiy@ifi.uio.no)
  • Peter Havgar(peterkh@ifi.uio.no)
  • Christopher Neumann Ruud (chrinr@ifi.uio.no)

Summary of requirements

In this project there will be developed two applications (app) for participating and creating quizzes, indented to contribute to e-learning of the DHIS2 system.The content of the apps is divided into courses consisting of modules with three different levels of users.

APP 1: Course taking app 

Initially intended for new beginners taking courses at different levels.

The application should include:

  • User level session
  1. Presentation, (presentation of a topic).
  2. Test/quiz.
  • Mentor level session
  1. Be able to check if a user has passed a level.
  2. Presentation, (issues users have when learning this topic).
  3. Test/quiz.
  • Further, the app should take into account: 
    • Competition: Score list or stats. Districts and/or individual.
    • Computer user interface: The application will open in a separate window.
    • The app will be foolproof and will not need any instructions before use.

 APP 2: Course writing app

This app is intended for creating and editing modules and courses. Will be rigid, so the format stays the same.

Courses:

Need to be able to edit and create:

  1. Motivation, possibly by adding a video.
  2. Select list of modules.
  3. Test/quiz.

Modules: 

The user will be able to create and edit the presentation of a topic; free text, formatting and inserting links, pictures, videos etc.

Evaluation: 

This module is for monitoring a set of users during an evaluation period, through logs of their use of some of the DHIS operations.

Architechture

We will primarily use HTML5, CSS3,, Bootstrap and jQuery in this project. We believe they will work well together and help us create the best possible solution. 

To communicate with the DHIS2 RESTful API, AJAX and JSON will be applied.

List of technologies and frameworks we will use:

  • JavaScript (jQuery)
  • JSON
  • CSS
  • HTML5
  • AJAX
  • Bootstrap

Features

The application will have the following features: 
(Core funtionality will be priorotized)

  • Two types of users: Normal User and Administrator
  • Creating quiz
  • Taking quiz
  • Courses
  • Modules
  • Tests

Functinality not included in first release:

  • Score Board (for competition)
  • Integrated update for each user taking a quiz
  • Mentoring possibilities (optional)
  • Forum for community of learners
  • Level system
  • Deleting courses
  • Editing courses

Time schedule

Each group should follow these milestones:

Milestone 1: 01th November

Document features and architecture on Wiki - DONE

Show understanding of DHIS2 web apps - DONE

Milestone 2: 15th November

First bare-bone version - static HTML - DONE

Basic JS object creation - DONE

Uploadable as DHIS2 web app - DONE and working

Read and write to API - DONE

Read and write to API via WEB - interface - DONE

Milestone 3: 8th December

Finished, if applicable also with mobile app. DONE

Final delivery: 8th December

Presentation: 9th December

How you are dividing tasks within the group

We worked on several of the tasks together, and had no pre-defined roles within the group.

However, we divided into areas of main responsibility. 

Peter: Forms and dataparsing - quiz-taking-app

Mona: HTML, layout, CSS over all, and front-end quiz-making-app.

Christopher: Backend API-read and write, quiz-making-logic, git-master

Screenshots and screen flows

Quiz making app

First step: This is the list of courses, with the ability to create more courses or edit a course's modules

First step: This is the list of courses, with the ability to create more courses or edit a course's modules


Second step: This is the list of modules, with the ability to create more modules or edit a module's tests

Second step: This is the list of modules, with the ability to create more modules or edit a module's tests


Third step: This is the list of tests, with the ability to create more questions

Third step: This is the list of tests, with the ability to create more questions

Quiz taking app

First scene in the application

First scene in the application

Total screen with application(left) and site (right)

Total screen with application(left) and site (right)

Second scene in the application

Second scene in the application

Third scene in the application

Third scene in the application

fourth scene in the application

Fourth scene in the application

Fifth scene in the application

Fifth scene in the application

Documented learning during project

In this project there has been a heavy focus on Javascript as a tool. Neither of the group members has used javascript in the past to any extent, and we feel we have learned a lot about DOM manipulation, AJAX and jQuery, javascript data structures, SCOPEs and functions.

In assition, we have used GIT extensively throughout he project, totaling over 250 commits between us.

We have also learned that most web-projects, or any project that needs to work with an established API, has to resort to workarounds in some cases because the API creators never predict all possible use-cases.

Known bugs and limitations

  • BUG: Because of some off-handing of javascript calls and asynchronous ajax-calls within jQuery Mobile, sometimes the data entered in the making - app will not persist properly.
  • Missing Feature: Deletion and editing of data in the making app not implemented
  • Missing Feature: Graphical progress visualization in taking - app not implemented.

Suggested improvements to APIs etc

We would very much like the server to handle application/json or application/xml - requests, so that everything would not have to be parsed to text/plain - Christopher

allow data creation apart from writing hacks into systemSettings/myKey - really dirty way of handling larger data structures - Christopher

/api/systemSettings.json gives 200 OK, as well as /api/systemSettings/myKey , but /api/systemSettings/myKey throws 404 errors with some GET methods in postman, for unknown reasons. The API should be tidier.

Link to repository

Link to our git repository

gitolite@git.uio.no:inf5750/chrinr/foxtrot

https://github.com/Christopherruud/FoxTrot

Download link to sample web app or Android app

Quiz Maker: [1]

Quiz Taker: [2]