Setting App代做、database代写、Java编程语言调试、代写Java

日期：2020-04-04 10:20

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