Difference between revisions of "Foxtrot"
(23 intermediate revisions by 3 users not shown) | |||
Line 55: | Line 55: | ||
== Architechture == | == Architechture == | ||
− | We will primarily use HTML5, CSS3,, Bootstrap and | + | 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. | 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 ( | + | *JavaScript (jQuery) |
− | *<span style="font-size:small"><span style="color: rgb(37, 37, 37); | + | *<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 91: | Line 91: | ||
= Time schedule = | = Time schedule = | ||
− | <span style="color: rgb(37, 37, 37); | + | <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 ==== | ||
Line 98: | Line 98: | ||
Show understanding of DHIS2 web apps - DONE | 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 |
Basic JS object creation - DONE | Basic JS object creation - DONE | ||
Line 111: | Line 109: | ||
Read and write to API - DONE | Read and write to API - DONE | ||
− | + | Read and write to API via WEB - interface - DONE | |
− | |||
− | |||
− | |||
− | |||
+ | ==== 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 125: | Line 121: | ||
= How you are dividing tasks within the group = | = How you are dividing tasks within the group = | ||
− | Peter: | + | 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 | + | Mona: HTML, layout, CSS over all, and front-end quiz-making-app. |
Christopher: Backend API-read and write, quiz-making-logic, git-master | Christopher: Backend API-read and write, quiz-making-logic, git-master | ||
Line 135: | Line 135: | ||
== Quiz making app == | == 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 == | == 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 = | ||
Line 153: | Line 201: | ||
Link to our git repository | Link to our git repository | ||
− | + | 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 11:31, 10 December 2014
Contents
- 1 List of group members
- 2 Summary of requirements
- 3 Time schedule
- 4 How you are dividing tasks within the group
- 5 Screenshots and screen flows
- 6 Documented learning during project
- 7 Known bugs and limitations
- 8 Suggested improvements to APIs etc
- 9 Link to repository
- 10 Download link to sample web app or Android app
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
- Presentation, (presentation of a topic).
- Test/quiz.
- Mentor level session
- Be able to check if a user has passed a level.
- Presentation, (issues users have when learning this topic).
- 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:
- Motivation, possibly by adding a video.
- Select list of modules.
- 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
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
Quiz taking app
First scene in the application
Total screen with application(left) and site (right)
Second scene in the application
Third scene in the application
Fourth 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]