CEGE0043讲解、辅导Mobile GIS、辅导Java语言、Java程序设计讲解
- 首页 >> Database Web and Mobile GIS
CEGE0043 - Assignment
Warning! This is ONE assignment, and most of you are new to programming. You are not required
to produce an App that you can then sell online – rather , make sure your work shows that you
understand the principles we cover in class. Documentation is important too.
Due: 15th April 2020 at 12.00 noon (deadline extended) (was: 1
st April 2020 at 12:00 noon )
Submission:
1. PDF Report (including all programming code in one or more Appendices) to be
a. uploaded on Turnitin
2. Code in the two provided GitHub repositories – api, app (master branch)
All assignment questions MUST be asked on Moodle so that everyone has the same information and I
don’t forget what I’ve discussed with you
Deadline for questions is 5 days before submission – i.e. 12:00 noon on the 10th April 2020
(was 27th March)
If you have borrowed a phone, when you return it please make sure you don’t have any
fingerprint/password/screen locks. I will arrange a date/time for phone return early in Term 3.
Notes:
1. This assignment constitutes 100% of the marks for this module.
2. Remember, if you borrow/adapt code from any other source you should be sure to acknowledge this
in your write-up and in the code files and in the ReadMe for your repositories.
Page 2 of 7
The Assignment – Develop a Location-Based Quiz
You are required to develop a Location-Based App which has two components
- An App, which, depending on where it is run will show:
o A quiz App that runs on a phone (using Bootstrap)
o A question setting App for use in a browser (using Bootstrap)
- A data API that saves questions to the database from the question App and serves these questions
to the quiz App, and then collects the users’ answers to the quiz and saves them to the database
Location-Based Quiz/Question App –(Leaflet/Bootstrap)
This App should detect whether you are opening it on a mobile phone or on a larger screen. If it is the
latter then the Question Setting version is launched, if the former then the Quiz is launched. Both versions
(known as the Quiz App and the Question Setting App) should make use of the same underlying code as
well as including functionality that is only used in one of the versions – i.e. they are really one App.
Quiz App
Once launched, the App should track the movement of the user. When they are close to a given point, the
App should prompt the user to answer a multiple-choice question about that location. For example, if such
an App were developed for UCL, once the user is in proximity of the main gate a question would appear
that would ask:
Was UCL founded in:
- 1826
- 1836
- 1910
- 1730
The user will then select the answer from the list. The system will then let the user know if they are right or
wrong, and will show them the correct answer. When the user moves to a different location, a different
question will be asked.
Question Setting App
A browser-based App (Web Application) that will allow the system to do the following:
1. Create a new question by clicking on a point on a Leaflet map and adding the question and four
possible answers. The question should be stored in a database via a RESTful Data API.
Note that the App MUST use the Bootstrap template we use in class
You must use the provided database tables to store your quiz questions and
answers (see Appendix). As this is not a databases module you will be given the
basic code for how to do this.
NodeJS RESTful Data API (NodeJS Express)
The questions (quiz points) created in the Question App should be stored in a database, and read from the
database by the Quiz App when the Quiz App is launched. The answers that the user gives should also be
uploaded back to the database. You are therefore required to write the RESTful Data API (node.js) code
to do the following:
1. Allows an administrator to store a list of question points and questions to a database, for use with
the Question App
2. Generates the list of questions to send to the quiz App when the App is launched
3. Stores the answers that are sent from the Quiz App
4. Includes the code you need to support any advanced functionality you develop (see marking
scheme below)
Page 3 of 7
Note: You may choose the questions that your system asks. However, the target map locations for your
App should all be within a 2 minute walk from the UCL main gate to allow for easy testing. You should also
select locations that are OUTSIDE to maximize the opportunity for getting a good GPS fix.
Anyone using your App should only be able to answer questions that you have set – you should use your
Port_ID to achieve this.
Submission
You are required to submit:
1. The code – in the two GitHub repositories provided for this module. Note that the ports should not
be hard coded – make sure you use the useful Javascript port detection utility.
2. A short report (PDF) (MAX 5 PAGES) outlining each part of the project – the data API and the
location-based App. In particular this should include:
a. An architecture diagram of the system showing how the different parts link together (app,
data API /database)
b. A list of the advanced components you developed
c. A report of the testing you carry out on your system, for example
i. What test points did you create
ii. What browsers did you test your questions App in
iii. Did you get other people to test your quiz App to see how usable it is
3. Two user guides - for the questions and quiz components of your submission – presented as
HTML pages within each App component (i.e. so that the users can access them while they are
using the software) – put one user giude in the Quiz and one in the Questions components and
make sure they are linked as HELP options from the menu
a. These should NOT include any technical detail – they should make it clear to the user how to
run the App
b. Step-by-step screenshots may be useful to guide the user through what they need to do
4. A technical guide for both App and API components – presented in the readme file in your
GitHub repositories on the README page for each component. This documentation should
include:
a. Any system requirements you have (e.g. software versions, browser versions, hardware
versions such as Android phone version)
b. How to deploy the code
c. How to test the code
d. A table listing what each HTML or JS or CSS file in the repository does
e. A list of any third party code you have referenced while creating your code (including code
samples from class)
Page 4 of 7
You will be assigned marks for criteria as follows (NB – the list describes functionality from the App
perspective but of course the corresponding data API functionality must also be developed):
Task Mark Comment
Good use of GitHub
8
You should have at least 200 contributions over the module.
These should not be mostly in the last week of the assignment.
Formatting changes – e.g. where you have added an extra line to
a file and then committed it – don’t count.
Note in particular that you should use a separate branch to
develop each of the functionality groups below, merging the
resulting code into the main branch (I will test the main branch).
GitHub only counts contributions that have been merged onto the
master branch in your repository.
PDF Documentation
10
Maximum 5 pages
Clear overall aims and objectives of the system you have built,
describing how the system is linked together
Details of any testing carried out
Other Documentation
20
Technical Report summarizing your 2 applications and the API
repository in README files in the corresponding GitHub
repositories
The user guides provided must be non-technical (linked as
‘help’ functionality HTML pages on your two Apps
In-code documentation
Deployment
3
Can I easily deploy and test your App by downloading the code
from your GitHub repository
Can I easily deploy and test the data API you have created,
using the code from your GitHub repository
0 marks if the port numbers are hard coded – use the port
detection Javascript I provided1
(I will be testing on my Ubuntu
server which has different ports so your code won’t work if you
hard-code the port numbers)
Core Functionality 1
16
App - Questions Component: create a question point, and save
it to the database
o The lat/lng of the question point should be created by
clicking on the map
App - Quiz Component: question points (showing the questions
set by your questions component) load automatically when the
quiz component starts
App - Quiz Component: the user clicks manually on the
question point in the quiz and is presented with a question
App – Quiz Component: the question appears in the pop-up on
the question point (when the user clicks on the point)
App – Quiz Component: the user answers the question and is
told if the answer is correct or incorrect
o For this version, there is no need to send the answer
back to the data API
Links to help documentation (HTML pages) in both
components
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
templates you could also get 0
1 A good way to test this is to deploy your code onto a friend’s server and see if it works
Page 5 of 7
Core Functionality 2
4
As for Core Functionality 1 but:
App - Questions component: existing quiz points that you have
created display on the question setting component
An error message appears in the question setting component if
user doesn’t type in a number between 1-4 for the correct
answer field or if the user doesn’t fill in all the required fields
App – quiz component: the map tracks the user’s location
automatically when the quiz app starts
App – quiz component: answers are sent back to the data API
to be saved to the database
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
templates you could also get 0
Advanced Functionality 1
12
As for Core Functionality 2 but:
App – quiz component: quiz question pops up automatically
(proximity alert) when the user is close to the point
App – quiz component: quiz point changes colour when the
question has been answered, with the colour depending on
whether answer was right or wrong
App – quiz component: user is told how many questions they
have answered correctly when they answer a question
App – quiz component: user is given their ranking (in
comparison to all other users) (as a menu option)
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
templates you could also get 0
Advanced Functionality 2
21
Advanced Functionality 2:
App – quiz component: graph showing top 5 scorers in the
quiz (as a menu option)
App – questions component: graph showing daily
participation rates for the past week (how many questions
have been answered, and how many answers were
correct) (as a menu option)
o For your user only
o For all users
App – questions component: map layer showing all the
questions added in the last week (by any user). The layer
must be added and removed via a menu option
App – questions component: map layer showing the 5
questions closest to the user’s current location, added by
any user. The layer must be added/removed via a menu
option
App – questions component: list of the 5 most difficult
questions (via a menu option) – i.e. where most wrong
answers were given
App – quiz component: map showing the last 5 questions
that the user answered (colour coded depending on
whether they were right/wrong the first time they answered
the question)
App – quiz component: App only shows questions and
calculates proximity alerts for questions that the user hasn’t
answered correctly
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
Page 6 of 7
templates you could also get 0
Quality of Programming
3
Is the code structured correctly (use of different files for
different aspects of the code)
Do you demonstrate good understanding of the concepts we
covered in class, and how to apply these in practice (can we
link from questions to data API to quiz)
Are there appropriate error handlers
Is there any duplicated code
Usability and Interface
Design
3
How easy is it to use the question and quiz apps (ideally
without instructions)
Have you made any additions to the basic Bootstrap interface
that we have been using in class, and if so are these well
presented
Note that this is an INDIVIDUAL piece of work. You should not work with others on this task. If necessary, I
will make use of tools such as MOSS to check for this2
.
Note: as this is not a databases assignment, I will post the SQL for the functions on Moodle. You will then
need to place this in your code
Note – if any element of your software does not work as you expect, then you should still submit the
corresponding documentation showing how it SHOULD work, using mock-ups of the screens – e.g. by
creating screen shots
2 https://theory.stanford.edu/~aiken/moss/ (Accessed 27th December 2017)
Page 7 of 7
Appendix 1- Database Tables
Two tables have been pre-created in my database for use in this assignment, as follows:
1. quizquestions – this is where you store the questions that you create using the question setting
App, and where you will get the questions from for the quiz component. The structure of this table
is as follows (all information is compulsory/mandatory – but the ID is generated automatically):
2. quizanswers – this is where you will save the answers that the user provides when they are using
the quiz. Note that you must provide the following information:
- port_id (the port on your Ubuntu server)
- question_id (which you will be able to obtain from the GeoJSON for the questions you submitted)
- answer_selected (a number between 1 and 4)
- correct_answer (a number between 1 and 4)
The timestamp is filled in automatically. The ID is generated automatically
CEGE0043 - Assignment
Warning! This is ONE assignment, and most of you are new to programming. You are not required
to produce an App that you can then sell online – rather , make sure your work shows that you
understand the principles we cover in class. Documentation is important too.
Due: 15th April 2020 at 12.00 noon (deadline extended) (was: 1
st April 2020 at 12:00 noon )
Submission:
1. PDF Report (including all programming code in one or more Appendices) to be
a. uploaded on Turnitin
2. Code in the two provided GitHub repositories – api, app (master branch)
All assignment questions MUST be asked on Moodle so that everyone has the same information and I
don’t forget what I’ve discussed with you
Deadline for questions is 5 days before submission – i.e. 12:00 noon on the 10th April 2020
(was 27th March)
If you have borrowed a phone, when you return it please make sure you don’t have any
fingerprint/password/screen locks. I will arrange a date/time for phone return early in Term 3.
Notes:
1. This assignment constitutes 100% of the marks for this module.
2. Remember, if you borrow/adapt code from any other source you should be sure to acknowledge this
in your write-up and in the code files and in the ReadMe for your repositories.
Page 2 of 7
The Assignment – Develop a Location-Based Quiz
You are required to develop a Location-Based App which has two components
- An App, which, depending on where it is run will show:
o A quiz App that runs on a phone (using Bootstrap)
o A question setting App for use in a browser (using Bootstrap)
- A data API that saves questions to the database from the question App and serves these questions
to the quiz App, and then collects the users’ answers to the quiz and saves them to the database
Location-Based Quiz/Question App –(Leaflet/Bootstrap)
This App should detect whether you are opening it on a mobile phone or on a larger screen. If it is the
latter then the Question Setting version is launched, if the former then the Quiz is launched. Both versions
(known as the Quiz App and the Question Setting App) should make use of the same underlying code as
well as including functionality that is only used in one of the versions – i.e. they are really one App.
Quiz App
Once launched, the App should track the movement of the user. When they are close to a given point, the
App should prompt the user to answer a multiple-choice question about that location. For example, if such
an App were developed for UCL, once the user is in proximity of the main gate a question would appear
that would ask:
Was UCL founded in:
- 1826
- 1836
- 1910
- 1730
The user will then select the answer from the list. The system will then let the user know if they are right or
wrong, and will show them the correct answer. When the user moves to a different location, a different
question will be asked.
Question Setting App
A browser-based App (Web Application) that will allow the system to do the following:
1. Create a new question by clicking on a point on a Leaflet map and adding the question and four
possible answers. The question should be stored in a database via a RESTful Data API.
Note that the App MUST use the Bootstrap template we use in class
You must use the provided database tables to store your quiz questions and
answers (see Appendix). As this is not a databases module you will be given the
basic code for how to do this.
NodeJS RESTful Data API (NodeJS Express)
The questions (quiz points) created in the Question App should be stored in a database, and read from the
database by the Quiz App when the Quiz App is launched. The answers that the user gives should also be
uploaded back to the database. You are therefore required to write the RESTful Data API (node.js) code
to do the following:
1. Allows an administrator to store a list of question points and questions to a database, for use with
the Question App
2. Generates the list of questions to send to the quiz App when the App is launched
3. Stores the answers that are sent from the Quiz App
4. Includes the code you need to support any advanced functionality you develop (see marking
scheme below)
Page 3 of 7
Note: You may choose the questions that your system asks. However, the target map locations for your
App should all be within a 2 minute walk from the UCL main gate to allow for easy testing. You should also
select locations that are OUTSIDE to maximize the opportunity for getting a good GPS fix.
Anyone using your App should only be able to answer questions that you have set – you should use your
Port_ID to achieve this.
Submission
You are required to submit:
1. The code – in the two GitHub repositories provided for this module. Note that the ports should not
be hard coded – make sure you use the useful Javascript port detection utility.
2. A short report (PDF) (MAX 5 PAGES) outlining each part of the project – the data API and the
location-based App. In particular this should include:
a. An architecture diagram of the system showing how the different parts link together (app,
data API /database)
b. A list of the advanced components you developed
c. A report of the testing you carry out on your system, for example
i. What test points did you create
ii. What browsers did you test your questions App in
iii. Did you get other people to test your quiz App to see how usable it is
3. Two user guides - for the questions and quiz components of your submission – presented as
HTML pages within each App component (i.e. so that the users can access them while they are
using the software) – put one user giude in the Quiz and one in the Questions components and
make sure they are linked as HELP options from the menu
a. These should NOT include any technical detail – they should make it clear to the user how to
run the App
b. Step-by-step screenshots may be useful to guide the user through what they need to do
4. A technical guide for both App and API components – presented in the readme file in your
GitHub repositories on the README page for each component. This documentation should
include:
a. Any system requirements you have (e.g. software versions, browser versions, hardware
versions such as Android phone version)
b. How to deploy the code
c. How to test the code
d. A table listing what each HTML or JS or CSS file in the repository does
e. A list of any third party code you have referenced while creating your code (including code
samples from class)
Page 4 of 7
You will be assigned marks for criteria as follows (NB – the list describes functionality from the App
perspective but of course the corresponding data API functionality must also be developed):
Task Mark Comment
Good use of GitHub
8
You should have at least 200 contributions over the module.
These should not be mostly in the last week of the assignment.
Formatting changes – e.g. where you have added an extra line to
a file and then committed it – don’t count.
Note in particular that you should use a separate branch to
develop each of the functionality groups below, merging the
resulting code into the main branch (I will test the main branch).
GitHub only counts contributions that have been merged onto the
master branch in your repository.
PDF Documentation
10
Maximum 5 pages
Clear overall aims and objectives of the system you have built,
describing how the system is linked together
Details of any testing carried out
Other Documentation
20
Technical Report summarizing your 2 applications and the API
repository in README files in the corresponding GitHub
repositories
The user guides provided must be non-technical (linked as
‘help’ functionality HTML pages on your two Apps
In-code documentation
Deployment
3
Can I easily deploy and test your App by downloading the code
from your GitHub repository
Can I easily deploy and test the data API you have created,
using the code from your GitHub repository
0 marks if the port numbers are hard coded – use the port
detection Javascript I provided1
(I will be testing on my Ubuntu
server which has different ports so your code won’t work if you
hard-code the port numbers)
Core Functionality 1
16
App - Questions Component: create a question point, and save
it to the database
o The lat/lng of the question point should be created by
clicking on the map
App - Quiz Component: question points (showing the questions
set by your questions component) load automatically when the
quiz component starts
App - Quiz Component: the user clicks manually on the
question point in the quiz and is presented with a question
App – Quiz Component: the question appears in the pop-up on
the question point (when the user clicks on the point)
App – Quiz Component: the user answers the question and is
told if the answer is correct or incorrect
o For this version, there is no need to send the answer
back to the data API
Links to help documentation (HTML pages) in both
components
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
templates you could also get 0
1 A good way to test this is to deploy your code onto a friend’s server and see if it works
Page 5 of 7
Core Functionality 2
4
As for Core Functionality 1 but:
App - Questions component: existing quiz points that you have
created display on the question setting component
An error message appears in the question setting component if
user doesn’t type in a number between 1-4 for the correct
answer field or if the user doesn’t fill in all the required fields
App – quiz component: the map tracks the user’s location
automatically when the quiz app starts
App – quiz component: answers are sent back to the data API
to be saved to the database
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
templates you could also get 0
Advanced Functionality 1
12
As for Core Functionality 2 but:
App – quiz component: quiz question pops up automatically
(proximity alert) when the user is close to the point
App – quiz component: quiz point changes colour when the
question has been answered, with the colour depending on
whether answer was right or wrong
App – quiz component: user is told how many questions they
have answered correctly when they answer a question
App – quiz component: user is given their ranking (in
comparison to all other users) (as a menu option)
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
templates you could also get 0
Advanced Functionality 2
21
Advanced Functionality 2:
App – quiz component: graph showing top 5 scorers in the
quiz (as a menu option)
App – questions component: graph showing daily
participation rates for the past week (how many questions
have been answered, and how many answers were
correct) (as a menu option)
o For your user only
o For all users
App – questions component: map layer showing all the
questions added in the last week (by any user). The layer
must be added and removed via a menu option
App – questions component: map layer showing the 5
questions closest to the user’s current location, added by
any user. The layer must be added/removed via a menu
option
App – questions component: list of the 5 most difficult
questions (via a menu option) – i.e. where most wrong
answers were given
App – quiz component: map showing the last 5 questions
that the user answered (colour coded depending on
whether they were right/wrong the first time they answered
the question)
App – quiz component: App only shows questions and
calculates proximity alerts for questions that the user hasn’t
answered correctly
Note – if I am unable to deploy the code as described above then
you may get 0 for this component. If you do not use the Bootstrap
Page 6 of 7
templates you could also get 0
Quality of Programming
3
Is the code structured correctly (use of different files for
different aspects of the code)
Do you demonstrate good understanding of the concepts we
covered in class, and how to apply these in practice (can we
link from questions to data API to quiz)
Are there appropriate error handlers
Is there any duplicated code
Usability and Interface
Design
3
How easy is it to use the question and quiz apps (ideally
without instructions)
Have you made any additions to the basic Bootstrap interface
that we have been using in class, and if so are these well
presented
Note that this is an INDIVIDUAL piece of work. You should not work with others on this task. If necessary, I
will make use of tools such as MOSS to check for this2
.
Note: as this is not a databases assignment, I will post the SQL for the functions on Moodle. You will then
need to place this in your code
Note – if any element of your software does not work as you expect, then you should still submit the
corresponding documentation showing how it SHOULD work, using mock-ups of the screens – e.g. by
creating screen shots
2 https://theory.stanford.edu/~aiken/moss/ (Accessed 27th December 2017)
Page 7 of 7
Appendix 1- Database Tables
Two tables have been pre-created in my database for use in this assignment, as follows:
1. quizquestions – this is where you store the questions that you create using the question setting
App, and where you will get the questions from for the quiz component. The structure of this table
is as follows (all information is compulsory/mandatory – but the ID is generated automatically):
2. quizanswers – this is where you will save the answers that the user provides when they are using
the quiz. Note that you must provide the following information:
- port_id (the port on your Ubuntu server)
- question_id (which you will be able to obtain from the GeoJSON for the questions you submitted)
- answer_selected (a number between 1 and 4)
- correct_answer (a number between 1 and 4)
The timestamp is filled in automatically. The ID is generated automatically