Setting App讲解、database辅导、Java编程语言调试、辅导Java 辅导R语言程序|辅导Python程序
- 首页 >> Database Question Setting App
A technical guide for a browser-based question setting app. This app helps the user to create a new
question about a location, add possible answers and upload questions to a database on the web
server. By using this app, the location of a question could be input by either clicking on a point on a
Leaflet map or manually typing latitudes and longitudes. This app is also able to retrieve existed
questions of certain characteristics and information of users from the database.
Table of Contents
1. System Requirements
2. Deployment
3. Testing
4. File description
5. Code reference
1. System Requirements
In order to enable the full functionality of this app, a browser that supports geolocation access
via http connection is required. Some browsers (such as Safari) block geolocation access via
http connection. As a result, the app cannot locate and zoom into user positions if it is opened
in those browsers. Therefore, it is recommended to use Chrome(Version 73.0.3683.75 or above)
or Firefox(Version 65.0.2 or above) for this app.
This app requires to make connections to a Ubuntu Server (Virtual Machine). You could
use BitVise, Pycharm (Version 2018.3.5 Professional Edition) or other SSH software to connect
to the Ubuntu Server.
If you are going to use this app outside the UCL campus (not connected to Eduroam), make
sure you are connected to UCL VPN by following the instructions
at https://www.ucl.ac.uk/isd/services/get-connected/remote-working-services/ucl-virtualprivate-network-vpn.
⬆ back to top
2. Deployment
Procedures to deploy this app:
1. Clone the source code of this question setting app from Github to CEGE server
at home/studentuser/code by typing in the command line (terminal) window for Ubuntu:
cd /home/studentuser/code
git clone https://github.com/ucl-geospatial/uceslxw-quiz.git
2. Clone the source code of the corresponding Node JS server from Github to CEGE server
at home/studentuser/code .
cd /home/studentuser/code
git clone https://github.com/ucl-geospatial/uceslxw-server.git
3. Go to the uceslxw-server folder and start the Node JS server.
cd /home/studentuser/code/uceslxw-server
pm2 start httpServer.js
4. Make sure the Node JS server is successfully started. If any error occurs, you could enter the
debug mode through the command line window by typing
cd /home/studentuser/code/uceslxw-server
node httpServer.js
⬆ back to top
3. Testing
Procedures to test this app:
1. Make sure your device is connected to UCL Wifi or UCL VPN.
2. Make sure the Node JS server is active.
3. In a browser that supports geolocation access via http connection (such as Chromeor Firefox),
type the following address to use the question setting
app.http://developer.cege.ucl.ac.uk:30313/uceslxw-questions/www/index.html
4. While testing the functionality of this map, use of Inspect or Developer mode of the browser
to see if any error occurs.
⬆ back to top
4. File description
The files associated te this question setting app are located in the www folder and several subfolders.
~/www
index.html : The main html file of this app, through which user could use all the question
setting functionality. It interconnects all of the resources within the ~/www folder and
makes use of them. This html contains several divs and menu buttons.
Div
id description
mapid Hold the leaflet map.
buttons
Hold a button below the map to zoom to user's current
location.
Hold a button to removes all layers except the base map and
user location marker.
difficult5 A hidden DIV to hold the 5 most difficult questions. It only
appears when the 5 most difficult questions are retrieved.
w3 Hold contents of createForm.html .
Button
name description
Load Quiz
Points
Load all the existing quiz points created by the current
user.
Remove
Quiz Points
Remove the existing quiz points created by the current
user.
Daily
Participation
(Current
User)
Show a histogram of daily participation rates of the
current user during last week, including how many
questions have been answered and how many answers
were correct.
Daily
Participation
(All Users)
Show a histogram of daily participation rates of all users in
the database during the past week, including how many
questions have been answered and how many answers
were correct.
Last Week
Added
Display question points added last week by any user in
the database.
Remove
Last Week Remove question points added last week.
The Most
Difficult 5
Show a list of the 5 most difficult questions in the
database.
Remove
Difficult 5
Remove the list of the 5 most difficult questions in the
database.
createForm.html : Containing a form for user to input questions and a button to upload
questions to a database. This html file is referenced and displayed within index.html .
~/www/css : Setting up styles of index.html (such as fonts and margins) and incorporating the
CSS required for custom icon creation.
~/www/images : Containing images required by index.html .
~/www/res
port.xml : Contains user port id data of http and https connections.
~/www/js : Containing Javascript files required by index.html .
leaflet.js : Load Leaflet map and create custom icons.
leaflet.awesome-markers.js : Add colorful iconic markers for Leaflet.
leafletFunctions.js : Contains functions that are utilised by multiple functions in
different Javascript files to enhance functionality of the app.
function description
onMapClick()
When the user clicks on the map, show a marker at
the clicked position and automatically enter the
coordinates of the clicked location.
loadedOrNot()
Detect if a layer is already loaded or not, thus data
won't be downloaded if a layer has already been
loaded.
removeLayer()
This function will remove any layer from the map
container if the layer is passed into this function. It
would notify the user that the layer will be
removed or indicate that a particular layer has not
been loaded.
removeAllLayers()
This function is useful when multiple layers are
loaded and it is difficult to remove one layer at a
time. It removes all layers except the base map and
user location marker if there were both loaded. It
would also generate an alert if no container has
been initialised.
removeMap()
The function is required before displaying D3
graphs. It close and removes the map container.
removeD3Graph()
This function is required before reloading maps. It
removes the D3 Graph if a D3 graph is loaded, then
reinitialise the map container and reload the base
map and user location marker.
utilities.js :
function description
getPort()
Get user port numbers based on the type of connections
(http or https), which are required to build database
connections for data uploading and downloading.
userTracking.js : Containing 3 functions related to user's location.
function description
trackLocation() Track user's current location.
showPosition()
Display user's location on the map, including a
marker and a pop up message.
userZoom()
If user location is obtained, zoom and center the map
to user's current location. If user location is not
defined, generate an alert. If no map layer is loaded,
i.e. when D3 graph is displaying, generate an alert.
startup.js : Contains functions to run at the startup of index.html .
function description
loadW3HTML()
Change div contents in one html by
other html pages.
startup() Monitor if the page has been fully loaded.
startUpFunctions() Automatically run functions as the page loaded
loadQuizPoints.js :
function description
loadQuizPoints()
Run the function when the Load quiz
points button in index.html is clicked. It
firstly removes the D3 graph if a D3 graph is
loaded. Then it removes other layers,
call getQuestion() and generate an alert.
getQuizPoints()
Get the question data from the server using an
XMLHttpRequest.
quizPointsResponse() Wait for the response from the data server,
and process the response once it is received
loadQuizPointsLayer()
Convert the received data - which is text - to
JSON format and add it to the map using
customer icons.
removeQuizPoints() Remove the quiz point layer from the map.
uploadData.js :
function description
startDataUpload()
Collecting question data input by the user. An error
message will appears if the user does not fill in all
the required fields.
function description
processData()
Tell the server what type of data we are uploading
and upload the data.
dataUploaded()
Wait and process response from the data server
and show the data uploading results on the web
page.
advancedFunctionality.js :
function description
getDailyUser() , getDailyAll()
Download
the daily
user
participation
data for the
current user
only or for
all users in
the
database
and display
the data in a
D3
histogram.
getLastWeek() , lastWeekResponse() , loadLastWeekLayer()
Download
the
questions
added in
the last
week (by
any user)
and add
them to the
map using
customer
icons.
~/www/help : Containing documents of user helping page.
⬆ back to top
5. Code reference
A large proportion of codes are adapted from the lab notes of CEGE 0043 Web Mobile and
GIS by Calire Ellul, including
Basic structures of index.html and reateForm.html
Functions related to events detector, data downloading, data uploading, data processing,
user location tracking, displaying map layers, and getting port numbers.
The utility of changing div contents of one .html by contents of another .html provided
by W3 schools.
The user interface of this app are based on Material design Lite Dashboard.
The histograms showing daily user participation utilise D3 JavaScript library.
The legends of D3 graphs are adapted from stackoverflow, accessed 10th March 2018.
function description
getDifficult5() , difficult5Response() , loadDifficult5()
Download
data of the
most
difficult 5
questions
and list
these
questions
with the
correct
answers and
user
information.
removeLastWeek() , removeDifficult5()
Remove
quiz points
that added
during last
week from
the map.
removeDifficult5()
Remove the
list of the 5
difficult
questions
from the
page.
The axis labels of D3 graphs are adapted from bl.ocks.org, accessed 10th March 2018.
May layers of this app are based on Leaflet.
The base map data is based on Open Street Map.
Template of user helping page is an modified version of Template Visual'sDocumentation.
⬆ back to top
A technical guide for a browser-based question setting app. This app helps the user to create a new
question about a location, add possible answers and upload questions to a database on the web
server. By using this app, the location of a question could be input by either clicking on a point on a
Leaflet map or manually typing latitudes and longitudes. This app is also able to retrieve existed
questions of certain characteristics and information of users from the database.
Table of Contents
1. System Requirements
2. Deployment
3. Testing
4. File description
5. Code reference
1. System Requirements
In order to enable the full functionality of this app, a browser that supports geolocation access
via http connection is required. Some browsers (such as Safari) block geolocation access via
http connection. As a result, the app cannot locate and zoom into user positions if it is opened
in those browsers. Therefore, it is recommended to use Chrome(Version 73.0.3683.75 or above)
or Firefox(Version 65.0.2 or above) for this app.
This app requires to make connections to a Ubuntu Server (Virtual Machine). You could
use BitVise, Pycharm (Version 2018.3.5 Professional Edition) or other SSH software to connect
to the Ubuntu Server.
If you are going to use this app outside the UCL campus (not connected to Eduroam), make
sure you are connected to UCL VPN by following the instructions
at https://www.ucl.ac.uk/isd/services/get-connected/remote-working-services/ucl-virtualprivate-network-vpn.
⬆ back to top
2. Deployment
Procedures to deploy this app:
1. Clone the source code of this question setting app from Github to CEGE server
at home/studentuser/code by typing in the command line (terminal) window for Ubuntu:
cd /home/studentuser/code
git clone https://github.com/ucl-geospatial/uceslxw-quiz.git
2. Clone the source code of the corresponding Node JS server from Github to CEGE server
at home/studentuser/code .
cd /home/studentuser/code
git clone https://github.com/ucl-geospatial/uceslxw-server.git
3. Go to the uceslxw-server folder and start the Node JS server.
cd /home/studentuser/code/uceslxw-server
pm2 start httpServer.js
4. Make sure the Node JS server is successfully started. If any error occurs, you could enter the
debug mode through the command line window by typing
cd /home/studentuser/code/uceslxw-server
node httpServer.js
⬆ back to top
3. Testing
Procedures to test this app:
1. Make sure your device is connected to UCL Wifi or UCL VPN.
2. Make sure the Node JS server is active.
3. In a browser that supports geolocation access via http connection (such as Chromeor Firefox),
type the following address to use the question setting
app.http://developer.cege.ucl.ac.uk:30313/uceslxw-questions/www/index.html
4. While testing the functionality of this map, use of Inspect or Developer mode of the browser
to see if any error occurs.
⬆ back to top
4. File description
The files associated te this question setting app are located in the www folder and several subfolders.
~/www
index.html : The main html file of this app, through which user could use all the question
setting functionality. It interconnects all of the resources within the ~/www folder and
makes use of them. This html contains several divs and menu buttons.
Div
id description
mapid Hold the leaflet map.
buttons
Hold a button below the map to zoom to user's current
location.
Hold a button to removes all layers except the base map and
user location marker.
difficult5 A hidden DIV to hold the 5 most difficult questions. It only
appears when the 5 most difficult questions are retrieved.
w3 Hold contents of createForm.html .
Button
name description
Load Quiz
Points
Load all the existing quiz points created by the current
user.
Remove
Quiz Points
Remove the existing quiz points created by the current
user.
Daily
Participation
(Current
User)
Show a histogram of daily participation rates of the
current user during last week, including how many
questions have been answered and how many answers
were correct.
Daily
Participation
(All Users)
Show a histogram of daily participation rates of all users in
the database during the past week, including how many
questions have been answered and how many answers
were correct.
Last Week
Added
Display question points added last week by any user in
the database.
Remove
Last Week Remove question points added last week.
The Most
Difficult 5
Show a list of the 5 most difficult questions in the
database.
Remove
Difficult 5
Remove the list of the 5 most difficult questions in the
database.
createForm.html : Containing a form for user to input questions and a button to upload
questions to a database. This html file is referenced and displayed within index.html .
~/www/css : Setting up styles of index.html (such as fonts and margins) and incorporating the
CSS required for custom icon creation.
~/www/images : Containing images required by index.html .
~/www/res
port.xml : Contains user port id data of http and https connections.
~/www/js : Containing Javascript files required by index.html .
leaflet.js : Load Leaflet map and create custom icons.
leaflet.awesome-markers.js : Add colorful iconic markers for Leaflet.
leafletFunctions.js : Contains functions that are utilised by multiple functions in
different Javascript files to enhance functionality of the app.
function description
onMapClick()
When the user clicks on the map, show a marker at
the clicked position and automatically enter the
coordinates of the clicked location.
loadedOrNot()
Detect if a layer is already loaded or not, thus data
won't be downloaded if a layer has already been
loaded.
removeLayer()
This function will remove any layer from the map
container if the layer is passed into this function. It
would notify the user that the layer will be
removed or indicate that a particular layer has not
been loaded.
removeAllLayers()
This function is useful when multiple layers are
loaded and it is difficult to remove one layer at a
time. It removes all layers except the base map and
user location marker if there were both loaded. It
would also generate an alert if no container has
been initialised.
removeMap()
The function is required before displaying D3
graphs. It close and removes the map container.
removeD3Graph()
This function is required before reloading maps. It
removes the D3 Graph if a D3 graph is loaded, then
reinitialise the map container and reload the base
map and user location marker.
utilities.js :
function description
getPort()
Get user port numbers based on the type of connections
(http or https), which are required to build database
connections for data uploading and downloading.
userTracking.js : Containing 3 functions related to user's location.
function description
trackLocation() Track user's current location.
showPosition()
Display user's location on the map, including a
marker and a pop up message.
userZoom()
If user location is obtained, zoom and center the map
to user's current location. If user location is not
defined, generate an alert. If no map layer is loaded,
i.e. when D3 graph is displaying, generate an alert.
startup.js : Contains functions to run at the startup of index.html .
function description
loadW3HTML()
Change div contents in one html by
other html pages.
startup() Monitor if the page has been fully loaded.
startUpFunctions() Automatically run functions as the page loaded
loadQuizPoints.js :
function description
loadQuizPoints()
Run the function when the Load quiz
points button in index.html is clicked. It
firstly removes the D3 graph if a D3 graph is
loaded. Then it removes other layers,
call getQuestion() and generate an alert.
getQuizPoints()
Get the question data from the server using an
XMLHttpRequest.
quizPointsResponse() Wait for the response from the data server,
and process the response once it is received
loadQuizPointsLayer()
Convert the received data - which is text - to
JSON format and add it to the map using
customer icons.
removeQuizPoints() Remove the quiz point layer from the map.
uploadData.js :
function description
startDataUpload()
Collecting question data input by the user. An error
message will appears if the user does not fill in all
the required fields.
function description
processData()
Tell the server what type of data we are uploading
and upload the data.
dataUploaded()
Wait and process response from the data server
and show the data uploading results on the web
page.
advancedFunctionality.js :
function description
getDailyUser() , getDailyAll()
Download
the daily
user
participation
data for the
current user
only or for
all users in
the
database
and display
the data in a
D3
histogram.
getLastWeek() , lastWeekResponse() , loadLastWeekLayer()
Download
the
questions
added in
the last
week (by
any user)
and add
them to the
map using
customer
icons.
~/www/help : Containing documents of user helping page.
⬆ back to top
5. Code reference
A large proportion of codes are adapted from the lab notes of CEGE 0043 Web Mobile and
GIS by Calire Ellul, including
Basic structures of index.html and reateForm.html
Functions related to events detector, data downloading, data uploading, data processing,
user location tracking, displaying map layers, and getting port numbers.
The utility of changing div contents of one .html by contents of another .html provided
by W3 schools.
The user interface of this app are based on Material design Lite Dashboard.
The histograms showing daily user participation utilise D3 JavaScript library.
The legends of D3 graphs are adapted from stackoverflow, accessed 10th March 2018.
function description
getDifficult5() , difficult5Response() , loadDifficult5()
Download
data of the
most
difficult 5
questions
and list
these
questions
with the
correct
answers and
user
information.
removeLastWeek() , removeDifficult5()
Remove
quiz points
that added
during last
week from
the map.
removeDifficult5()
Remove the
list of the 5
difficult
questions
from the
page.
The axis labels of D3 graphs are adapted from bl.ocks.org, accessed 10th March 2018.
May layers of this app are based on Leaflet.
The base map data is based on Open Street Map.
Template of user helping page is an modified version of Template Visual'sDocumentation.
⬆ back to top