added things
This commit is contained in:
ruchi
parent
6d3ba1a714
commit
0ffd256672
25 changed files with 365 additions and 279 deletions
|
|
@ -1 +0,0 @@
|
||||||
[{"animal":"Cat","count":5},{"animal":"Dog","count":3},{"animal":"Turtle","count":12}]
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
[{"color":"Red","count":11},{"color":"Green","count":9},{"color":"Blue","count":7},{"color":["Red","Green","Blue"],"count":1}]
|
|
||||||
13
data/comments.json
Normal file
13
data/comments.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
[{
|
||||||
|
"comments": "Hey",
|
||||||
|
"count": 1
|
||||||
|
}, {
|
||||||
|
"comments": "ssdfg",
|
||||||
|
"count": 1
|
||||||
|
}, {
|
||||||
|
"comments": "sacdasdasdx",
|
||||||
|
"count": 1
|
||||||
|
}, {
|
||||||
|
"comments": "nfgn",
|
||||||
|
"count": 1
|
||||||
|
}]
|
||||||
1
data/email.json
Normal file
1
data/email.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{ "email": "bbaso079@uottawa.ca", "count": 1 }, { "email": "ruchirawperera@gmail.com", "count": 1 }, { "email": "fsdfsd", "count": 1 }, { "email": "dgfbb", "count": 1 }]
|
||||||
13
data/firstName.json
Normal file
13
data/firstName.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
[{
|
||||||
|
"firstName": "Batuhan",
|
||||||
|
"count": 1
|
||||||
|
}, {
|
||||||
|
"firstName": "Ruchira",
|
||||||
|
"count": 1
|
||||||
|
}, {
|
||||||
|
"firstName": "dzsfvs",
|
||||||
|
"count": 1
|
||||||
|
}, {
|
||||||
|
"firstName": "xff",
|
||||||
|
"count": 1
|
||||||
|
}]
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
[{"fruit":"apple","count":1},{"fruit":"pear","count":2},{"fruit":"papaya","count":1},{"fruit":"strawberry","count":2},{"fruit":"peach","count":2},{"fruit":"kiwi","count":1},{"fruit":"Apple","count":1},{"fruit":"monkey","count":1}]
|
|
||||||
1
data/lastName.json
Normal file
1
data/lastName.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"lastName":"Basoglu","count":1},{"lastName":"Perera","count":1},{"lastName":"asdasd","count":1},{"lastName":"dthbh","count":1}]
|
||||||
1
data/question1.json
Normal file
1
data/question1.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"question1":"yes","count":2},{"question1":"no","count":2}]
|
||||||
1
data/question2.json
Normal file
1
data/question2.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"question2":"Old UI","count":3},{"question2":"New UI","count":1}]
|
||||||
1
data/question3.json
Normal file
1
data/question3.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"question3":"on","count":4}]
|
||||||
1
data/question4.json
Normal file
1
data/question4.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"question4":["Position of messages on the screen is consistent","Prompts for inputs are clear","System always informs about the progress of the task"],"count":1},{"question4":["Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1},{"question4":["Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1},{"question4":["Prompts for inputs are clear ","System always informs about the progress of the task "],"count":1}]
|
||||||
1
data/question5.json
Normal file
1
data/question5.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"question5":"on","count":4}]
|
||||||
1
data/question6.json
Normal file
1
data/question6.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"question6":"yahoo","count":1},{"question6":"kl","count":1},{"question6":"asdasd","count":1},{"question6":"dbgnf","count":1}]
|
||||||
138
index.html
138
index.html
|
|
@ -1,138 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
|
|
||||||
<title>Survey of Facebook UI</title>
|
|
||||||
<meta name="description" content="Survey of Facebook UI">
|
|
||||||
<meta name="author" content="SitePoint">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/styles.css?v=1.0">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1>Questionnaire of the Facebook UI/UX</h1>
|
|
||||||
<a href="https://www.facebook.com/">
|
|
||||||
<img src="images/fb.png" alt="Facebook" class="fb">
|
|
||||||
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="survey_body">
|
|
||||||
<img src="images/facebook.jpg" alt="UI" class="facebook">
|
|
||||||
<p style="font-size:150%;">Give us your opinion about <a href="https://www.facebook.com/">Facebook</a> user interface</p>
|
|
||||||
<form>
|
|
||||||
|
|
||||||
<div class="form-control">
|
|
||||||
<label id="name-label">First Name:</label>
|
|
||||||
<input type="text" placeholder="Enter the First Name" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-control">
|
|
||||||
<label id="name-label">Last Name:</label>
|
|
||||||
<input type="text" placeholder="Enter the Last Name" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-control">
|
|
||||||
<label id="name-label">E-mail:</label>
|
|
||||||
<input type="text" placeholder="Enter the Email" required>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div id="questions">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="two">
|
|
||||||
<form>
|
|
||||||
<label id="radio">Do you use the Facebook user interface often?</label>
|
|
||||||
<br>
|
|
||||||
<div style="margin-right: 4px;">
|
|
||||||
<input type="radio" value="yes" name="enjoy">
|
|
||||||
<label for="yes">Yes</label>
|
|
||||||
<input type="radio" value="no" name="enjoy">
|
|
||||||
<label for="no">No</label>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="box">
|
|
||||||
<label>Which Facebook user interface do you prefer?</label>
|
|
||||||
<div style="margin-left: 22px;">
|
|
||||||
<form action="/action_page.php" method="get">
|
|
||||||
<label for="browser"></label>
|
|
||||||
<input list="browsers" name="browser" id="browser">
|
|
||||||
<datalist id="browsers">
|
|
||||||
<option value="Old UI">
|
|
||||||
<option value="New UI">
|
|
||||||
<option value="No Preference">
|
|
||||||
</datalist>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btn-control">
|
|
||||||
<label id="radio">How difficult is reading characters on the screen?</label><br>
|
|
||||||
<input type="radio" name="Times ">Very Hard<br>
|
|
||||||
<input type="radio" name="Times ">Somewhat hard<br>
|
|
||||||
<input type="radio" name="Times ">Somewhat easy<br>
|
|
||||||
<input type="radio" name="Times ">Very easy<br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btn-control">
|
|
||||||
<label id="checkbox;">Please state your level of agreement for the following:</label><br>
|
|
||||||
<input type="checkbox" value="">Use of terms throughout the system is consistent</input><br>
|
|
||||||
<input type="checkbox" value="">Position of messages on the screen is consistent</input><br>
|
|
||||||
<input type="checkbox" value="">Prompts for inputs are clear</input><br>
|
|
||||||
<input type="checkbox" value="">System always informs about the progress of the task</input><br>
|
|
||||||
<input type="checkbox" value="">Error messages are helpful</input>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btn-control">
|
|
||||||
<label id="radio">In which section of facebook does the user interface look most awful?</label><br>
|
|
||||||
<input type="radio" name="Times ">Photos<br>
|
|
||||||
<input type="radio" name="Times ">News<br>
|
|
||||||
<input type="radio" name="Times ">Messaging<br>
|
|
||||||
<input type="radio" name="Times ">Games<br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btn-control">
|
|
||||||
<label id="radio">Is there a problem in UI that bothers you?</label><br>
|
|
||||||
<input type="text" placeholder="Enter the name of your source" size="43">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<div class="texto">
|
|
||||||
<p style="font-size:120%;">Please enter your comments here:
|
|
||||||
<p>
|
|
||||||
<textarea rows="10" cols="100" maxlength="3000" placeholder="Enter your text...."></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="button">Submit</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
// jQuery that will "listen" to the html niceSurvey.html
|
// jQuery that will "listen" to the html niceSurvey.html
|
||||||
$(document).ready(function(){
|
$(document).ready(function() {
|
||||||
|
|
||||||
$('form').on('submit', function(){
|
$('form').on('submit', function() {
|
||||||
|
|
||||||
// var item = $('form input');
|
// var item = $('form input');
|
||||||
// console.log(item.serializeArray());
|
// console.log(item.serializeArray());
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
url: '/niceSurvey',
|
url: '/survey',
|
||||||
data: $(this).serializeArray(),
|
data: $(this).serializeArray(),
|
||||||
success: function(data){
|
success: function(data) {
|
||||||
// do something with the data via front-end framework
|
// do something with the data via front-end framework
|
||||||
// Make the submit button red, disabled and saying Thank you
|
// Make the submit button red, disabled and saying Thank you
|
||||||
$("#bb").css("background-color", "red");
|
$("#bb").css("background-color", "red");
|
||||||
$("#bb").prop("disabled", "true");
|
$("#bb").prop("disabled", "true");
|
||||||
$("#bb").text("Thank you!");
|
$("#bb").text("Thank you!");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -1,89 +1,82 @@
|
||||||
body {
|
body {
|
||||||
background-color: #66BFBF;
|
background-color: #9caf49;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-image: url("images/bg3.jpg");
|
/* background-image: url("images/bg3.jpg"); */
|
||||||
|
}
|
||||||
|
|
||||||
}
|
h1 {
|
||||||
|
|
||||||
h1{
|
|
||||||
font-family: "Helvetica ", sans-serif;
|
font-family: "Helvetica ", sans-serif;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
color: rgb(45, 43, 170);
|
color: rgb(45, 43, 170);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.browser{
|
.browser {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.texto{
|
.survey_body {
|
||||||
padding-left: 35px;
|
background-color: #53dfe4;
|
||||||
}
|
|
||||||
|
|
||||||
.survey_body{
|
|
||||||
background-color: #ffffff;
|
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control{
|
.form-control-1 {
|
||||||
padding-right: 43%;
|
padding-right: 43%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin: 10px 0px;
|
margin: 10px 0px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.texto {
|
||||||
.texto{
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding-left: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.two{
|
.two {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box{
|
.box {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-control{
|
.btn-control {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
padding-left: 41%;
|
padding-left: 40%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.questions{
|
.questions {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fb{
|
.fb {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
height:auto;
|
height: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: rgb(87, 139, 216);
|
background-color: rgb(87, 139, 216);
|
||||||
color: rgb(255, 255, 255);
|
color: rgb(255, 255, 255);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
background-color: rgb(87, 139, 216);
|
background-color: rgb(87, 139, 216);
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
margin: 0 auto;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -93,3 +86,7 @@ h1{
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btnClass {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
// required packages
|
// required packages
|
||||||
var bodyParser = require('body-parser');
|
var bodyParser = require('body-parser');
|
||||||
var urlencodedParser = bodyParser.urlencoded({extended: false});
|
var urlencodedParser = bodyParser.urlencoded({ extended: false });
|
||||||
var fs = require('fs');
|
var fs = require('fs');
|
||||||
|
|
||||||
// read the data file
|
// read the data file
|
||||||
function readData(fileName){
|
function readData(fileName) {
|
||||||
let dataRead = fs.readFileSync('./data/' + fileName + '.json');
|
let dataRead = fs.readFileSync('./data/' + fileName + '.json');
|
||||||
let infoRead = JSON.parse(dataRead);
|
let infoRead = JSON.parse(dataRead);
|
||||||
return infoRead;
|
return infoRead;
|
||||||
}
|
}
|
||||||
|
|
||||||
// read the data file
|
// read the data file
|
||||||
function writeData(info, fileName){
|
function writeData(info, fileName) {
|
||||||
data = JSON.stringify(info);
|
data = JSON.stringify(info);
|
||||||
fs.writeFileSync('./data/' + fileName + '.json', data);
|
fs.writeFileSync('./data/' + fileName + '.json', data);
|
||||||
}
|
}
|
||||||
|
|
@ -19,63 +19,72 @@ function writeData(info, fileName){
|
||||||
// update the data file, I use "name" to be equal to fruit, or animal or color
|
// update the data file, I use "name" to be equal to fruit, or animal or color
|
||||||
// to match with the file names
|
// to match with the file names
|
||||||
// I assume we always just add 1 to a single item
|
// I assume we always just add 1 to a single item
|
||||||
function combineCounts(name, value){
|
function combineCounts(name, value) {
|
||||||
// console.log(value);
|
// console.log(value);
|
||||||
info = readData(name);
|
info = readData(name);
|
||||||
// will be useful for text entry, since the item typed in might not be in the list
|
// will be useful for text entry, since the item typed in might not be in the list
|
||||||
var found = 0;
|
var found = 0;
|
||||||
for (var i=0; i<info.length; i++){
|
for (var i = 0; i < info.length; i++) {
|
||||||
if (info[i][name] === value){
|
if (info[i][name] === value) {
|
||||||
info[i].count = parseInt(info[i].count) + 1;
|
info[i].count = parseInt(info[i].count) + 1;
|
||||||
found = 1;
|
found = 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (found === 0){
|
if (found === 0) {
|
||||||
info.push({[name] : value, count: 1});
|
info.push({
|
||||||
|
[name]: value,
|
||||||
|
count: 1
|
||||||
|
});
|
||||||
}
|
}
|
||||||
writeData(info, name);
|
writeData(info, name);
|
||||||
}
|
}
|
||||||
|
|
||||||
// This is the controler per se, with the get/post
|
// This is the controler per se, with the get/post
|
||||||
module.exports = function(app){
|
module.exports = function(app) {
|
||||||
|
|
||||||
// when a user goes to localhost:3000/analysis
|
// when a user goes to localhost:3000/analysis
|
||||||
// serve a template (ejs file) which will include the data from the data files
|
// serve a template (ejs file) which will include the data from the data files
|
||||||
app.get('/analysis', function(req, res){
|
app.get('/analysis', function(req, res) {
|
||||||
var color = readData("color");
|
var firstName = readData("firstName");
|
||||||
var fruit = readData("fruit");
|
var lastName = readData("lastName");
|
||||||
var animal = readData("animal");
|
var email = readData("email");
|
||||||
res.render('showResults', {results: [color, fruit, animal]});
|
var question1 = readData("question1");
|
||||||
console.log([color, fruit, animal]);
|
var question2 = readData("question2");
|
||||||
|
var question3 = readData("question3");
|
||||||
|
var question4 = readData("question4");
|
||||||
|
var question5 = readData("question5");
|
||||||
|
var question6 = readData("question6");
|
||||||
|
var comments = readData("comments");
|
||||||
|
res.render('showResults', { results: [firstName, lastName, email, question1, question2, question3, question4, question5, question6, comments] });
|
||||||
|
console.log([firstName, lastName, email, question1, question2, question3, question4, question5, question6, comments]);
|
||||||
});
|
});
|
||||||
|
|
||||||
// when a user goes to localhost:3000/niceSurvey
|
// when a user goes to localhost:3000/niceSurvey
|
||||||
// serve a static html (the survey itself to fill in)
|
// serve a static html (the survey itself to fill in)
|
||||||
app.get('/niceSurvey', function(req, res){
|
app.get('/survey', function(req, res) {
|
||||||
res.sendFile(__dirname+'/views/niceSurvey.html');
|
res.sendFile(__dirname + '/views/index.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
// when a user types SUBMIT in localhost:3000/niceSurvey
|
// when a user types SUBMIT in localhost:3000/niceSurvey
|
||||||
// the action.js code will POST, and what is sent in the POST
|
// the action.js code will POST, and what is sent in the POST
|
||||||
// will be recuperated here, parsed and used to update the data files
|
// will be recuperated here, parsed and used to update the data files
|
||||||
app.post('/niceSurvey', urlencodedParser, function(req, res){
|
app.post('/survey', urlencodedParser, function(req, res) {
|
||||||
console.log(req.body);
|
console.log(req.body);
|
||||||
var json = req.body;
|
var json = req.body;
|
||||||
for (var key in json){
|
for (var key in json) {
|
||||||
console.log(key + ": " + json[key]);
|
console.log(key + ": " + json[key]);
|
||||||
// in the case of checkboxes, the user might check more than one
|
// in the case of checkboxes, the user might check more than one
|
||||||
if ((key === "color") && (json[key].length === 2)){
|
if ((key === "question4") && (json[key].length === 4)) {
|
||||||
for (var item in json[key]){
|
for (var item in json[key]) {
|
||||||
combineCounts(key, json[key][item]);
|
combineCounts(key, json[key][item]);
|
||||||
}
|
}
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
combineCounts(key, json[key]);
|
combineCounts(key, json[key]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// mystery line... (if I take it out, the SUBMIT button does change)
|
// mystery line... (if I take it out, the SUBMIT button does change)
|
||||||
// if anyone can figure this out, let me know!
|
// if anyone can figure this out, let me know!
|
||||||
res.sendFile(__dirname + "/views/niceSurvey.html");
|
res.sendFile(__dirname + "/views/index.html");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
159
views/index.html
Normal file
159
views/index.html
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html lang="en-US">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
||||||
|
<title>Survey of Facebook UI</title>
|
||||||
|
<meta name="description" content="Survey of Facebook UI">
|
||||||
|
<meta name="author" content="SitePoint">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- The Nav section for the survey title---->
|
||||||
|
<navbar>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<h1>Questionnaire of the Facebook UI/UX</h1>
|
||||||
|
<a href="https://www.facebook.com/"><img src="images/fb.png" alt="Facebook" class="fb"></a>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<img src="images/facebook.jpg" alt="UI" class="facebook">
|
||||||
|
<p style="font-size:150%;">Give us your opinion about <a href="https://www.facebook.com/">Facebook</a> user interface</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</navbar>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="survey_body">
|
||||||
|
|
||||||
|
<h2>Facebook Evaluation Form</h2>
|
||||||
|
<p>Please let us about your thoughts/experience with facebook user interface.</p>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-2">
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<form>
|
||||||
|
<div class="form-control-1">
|
||||||
|
<label id="name-label">First Name:</label>
|
||||||
|
<input type="text" name="firstName" placeholder="Enter the First Name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-control-1">
|
||||||
|
<label id="name-label">Last Name:</label>
|
||||||
|
<input type="text" name="lastName" placeholder="Enter the Last Name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-control-1">
|
||||||
|
<label id="name-label">E-mail:</label>
|
||||||
|
<input type="text" name="email" placeholder="Enter the Email" required>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div id="questions">
|
||||||
|
<div class="two">
|
||||||
|
<form>
|
||||||
|
<label id="radio">Do you use the Facebook user interface often?</label>
|
||||||
|
<br>
|
||||||
|
<div style="margin-right: 4px;">
|
||||||
|
<input type="radio" name="question1" value="yes" name="enjoy">
|
||||||
|
<label for="yes">Yes</label>
|
||||||
|
<input type="radio" name="question1" value="no" name="enjoy">
|
||||||
|
<label for="no">No</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<label>Which Facebook user interface do you prefer?</label>
|
||||||
|
<div style="margin-left: 22px;">
|
||||||
|
<select name="question2">
|
||||||
|
<option value="" selected=""> Select an Option</option>
|
||||||
|
<option value="Old UI"> Old UI</option>
|
||||||
|
<option value="New UI"> New UI </option>
|
||||||
|
<option value="No Preference"> No Preference</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-control">
|
||||||
|
<label id="radio">How difficult is reading characters on the screen?</label><br>
|
||||||
|
<input type="radio" name="question3"> Very Hard<br>
|
||||||
|
<input type="radio" name="question3"> Somewhat hard<br>
|
||||||
|
<input type="radio" name="question3"> Somewhat easy<br>
|
||||||
|
<input type="radio" name="question3"> Very easy<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-control">
|
||||||
|
<label id="checkbox;">Please state your level of agreement for the following:</label><br>
|
||||||
|
<input type="checkbox" name="question4" value="Use of terms throughout the system is consistent "> Use of terms throughout the system is consistent</input><br>
|
||||||
|
<input type="checkbox" name="question4" value="Position of messages on the screen is consistent "> Position of messages on the screen is consistent</input><br>
|
||||||
|
<input type="checkbox" name="question4" value="Prompts for inputs are clear "> Prompts for inputs are clear</input><br>
|
||||||
|
<input type="checkbox" name="question4" value="System always informs about the progress of the task "> System always informs about the progress of the task</input><br>
|
||||||
|
<input type="checkbox" name="question4" value="Error messages are helpful "> Error messages are helpful</input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-control">
|
||||||
|
<label id="radio">In which section of facebook does the user interface look most awful?</label><br>
|
||||||
|
<input type="radio" name="question5"> Photos<br>
|
||||||
|
<input type="radio" name="question5"> News<br>
|
||||||
|
<input type="radio" name="question5"> Messaging<br>
|
||||||
|
<input type="radio" name="question5"> Games<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-control">
|
||||||
|
<label id="radio">Is there a problem in UI that bothers you?</label><br>
|
||||||
|
<input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<div class="texto">
|
||||||
|
<p style="font-size:120%;">Please enter your comments here:
|
||||||
|
<p>
|
||||||
|
<textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder="Enter your text...."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="btnClass">
|
||||||
|
<button type="submit" class="button" id="bb">Submit</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
||||||
|
</footer>
|
||||||
|
<!--<div class="footer">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/action.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Questionnaire</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<!-- Style sheet (CSS) and JavaScript scripts necessary to use Bootstrap -->
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
|
||||||
|
|
||||||
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container-md p-3 my-3 border bg-dark text-white" id="survey">
|
|
||||||
<h1>Survey</h1>
|
|
||||||
<form>
|
|
||||||
<h2> What fruits(s) do you like? </h2>
|
|
||||||
I like:<br>
|
|
||||||
<input type="text" name="fruit" placeholder="fruit name..." required />
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<h2> What color(s) do you like? </h2>
|
|
||||||
I like:<br>
|
|
||||||
<input type="checkbox" name="color" value="Red"> Red<br>
|
|
||||||
<input type="checkbox" name="color" value="Green"> Green<br>
|
|
||||||
<input type="checkbox" name="color" value="Blue"> Blue<br>
|
|
||||||
<br>
|
|
||||||
<h2>What is your favorite animal?</h2>
|
|
||||||
I like:<br>
|
|
||||||
<select name="animal">
|
|
||||||
<option value="Cat" selected="selected">Cat</option>
|
|
||||||
<option value="Dog">Dog</option>
|
|
||||||
<option value="Turtle">Turtle</option>
|
|
||||||
</select>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<button type="submit" class="btn btn-warning" id="bb">Submit</button>
|
|
||||||
<p id="thanks"></p>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<script src="/assets/action.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,27 +1,101 @@
|
||||||
<html lang="en-US">
|
<html lang="en-US">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Survey Analysis</title>
|
<title>Survey Analysis</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Survey analysis</h1>
|
<h1>Survey analysis</h1>
|
||||||
<h2>Colors</h2>
|
<h2>First Name</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<% for (var i=0; i<results[0].length; i++){ %>
|
<% for (var i=0; i<results[0].length; i++){ %>
|
||||||
<li><%= results[0][i].color %> : <%= results[0][i].count %></li>
|
<li>
|
||||||
<% } %>
|
<%= results[0][i].firstName %> :
|
||||||
|
<%= results[0][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Fruits</h2>
|
<h2>Last Name</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<% for (var i=0; i<results[1].length; i++){ %>
|
<% for (var i=0; i<results[1].length; i++){ %>
|
||||||
<li><%= results[1][i].fruit %> : <%= results[1][i].count %></li>
|
<li>
|
||||||
<% } %>
|
<%= results[1][i].lastName %> :
|
||||||
|
<%= results[1][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Animals</h2>
|
<h2>Email</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<% for (var i=0; i<results[2].length; i++){ %>
|
<% for (var i=0; i<results[2].length; i++){ %>
|
||||||
<li><%= results[2][i].animal %> : <%= results[2][i].count %></li>
|
<li>
|
||||||
<% } %>
|
<%= results[2][i].email %> :
|
||||||
|
<%= results[2][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<h2>Question 1</h2>
|
||||||
|
<ul>
|
||||||
|
<% for (var i=0; i<results[3].length; i++){ %>
|
||||||
|
<li>
|
||||||
|
<%= results[3][i].question1 %> :
|
||||||
|
<%= results[3][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<h2>Question 2</h2>
|
||||||
|
<ul>
|
||||||
|
<% for (var i=0; i<results[4].length; i++){ %>
|
||||||
|
<li>
|
||||||
|
<%= results[4][i].question2 %> :
|
||||||
|
<%= results[4][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<h2>Question 3</h2>
|
||||||
|
<ul>
|
||||||
|
<% for (var i=0; i<results[5].length; i++){ %>
|
||||||
|
<li>
|
||||||
|
<%= results[5][i].question3 %> :
|
||||||
|
<%= results[5][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<h2>Question 4</h2>
|
||||||
|
<ul>
|
||||||
|
<% for (var i=0; i<results[6].length; i++){ %>
|
||||||
|
<li>
|
||||||
|
<%= results[6][i].question4 %> :
|
||||||
|
<%= results[6][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<h2>Question 5</h2>
|
||||||
|
<ul>
|
||||||
|
<% for (var i=0; i<results[7].length; i++){ %>
|
||||||
|
<li>
|
||||||
|
<%= results[7][i].question5 %> :
|
||||||
|
<%= results[7][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<h2>Question 6</h2>
|
||||||
|
<ul>
|
||||||
|
<% for (var i=0; i<results[8].length; i++){ %>
|
||||||
|
<li>
|
||||||
|
<%= results[8][i].question6 %> :
|
||||||
|
<%= results[8][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
|
</ul>
|
||||||
|
<h2>Comments</h2>
|
||||||
|
<ul>
|
||||||
|
<% for (var i=0; i<results[9].length; i++){ %>
|
||||||
|
<li>
|
||||||
|
<%= results[9][i].comments %> :
|
||||||
|
<%= results[9][i].count %>
|
||||||
|
</li>
|
||||||
|
<% } %>
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue