modification for user interface of the survey
This commit is contained in:
soyed
parent
0ffd256672
commit
5005a3c118
12 changed files with 208 additions and 175 deletions
|
|
@ -1,13 +1 @@
|
||||||
[{
|
[{"comments":"Hey","count":1},{"comments":"ssdfg","count":1},{"comments":"sacdasdasdx","count":1},{"comments":"nfgn","count":1},{"comments":"cvvcvvc","count":1},{"comments":"dgfffgdfgd","count":1},{"comments":"dvssdvvdvddsvvsvsdvvdvdsvdsvsdl mksdvjnbijovnvsapslvib9vuodbfaviuovlvboaidslvbdlvabdsvvoulvgovdbvuvavovbbvdebvdvivvv","count":1}]
|
||||||
"comments": "Hey",
|
|
||||||
"count": 1
|
|
||||||
}, {
|
|
||||||
"comments": "ssdfg",
|
|
||||||
"count": 1
|
|
||||||
}, {
|
|
||||||
"comments": "sacdasdasdx",
|
|
||||||
"count": 1
|
|
||||||
}, {
|
|
||||||
"comments": "nfgn",
|
|
||||||
"count": 1
|
|
||||||
}]
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
[{ "email": "bbaso079@uottawa.ca", "count": 1 }, { "email": "ruchirawperera@gmail.com", "count": 1 }, { "email": "fsdfsd", "count": 1 }, { "email": "dgfbb", "count": 1 }]
|
[{"email":"bbaso079@uottawa.ca","count":1},{"email":"ruchirawperera@gmail.com","count":1},{"email":"fsdfsd","count":1},{"email":"dgfbb","count":1},{"email":"a@g.com","count":1}]
|
||||||
|
|
@ -1,13 +1 @@
|
||||||
[{
|
[{"firstName":"Batuhan","count":1},{"firstName":"Ruchira","count":1},{"firstName":"dzsfvs","count":1},{"firstName":"xff","count":1},{"firstname":["vvcv","cvv"],"count":1},{"firstname":["dfdgfgdf","dwa@g.com"],"count":1},{"firstName":"cddvdvd","count":1}]
|
||||||
"firstName": "Batuhan",
|
|
||||||
"count": 1
|
|
||||||
}, {
|
|
||||||
"firstName": "Ruchira",
|
|
||||||
"count": 1
|
|
||||||
}, {
|
|
||||||
"firstName": "dzsfvs",
|
|
||||||
"count": 1
|
|
||||||
}, {
|
|
||||||
"firstName": "xff",
|
|
||||||
"count": 1
|
|
||||||
}]
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
[{"lastName":"Basoglu","count":1},{"lastName":"Perera","count":1},{"lastName":"asdasd","count":1},{"lastName":"dthbh","count":1}]
|
[{"lastName":"Basoglu","count":1},{"lastName":"Perera","count":1},{"lastName":"asdasd","count":1},{"lastName":"dthbh","count":1},{"lastname":"vcvc","count":1},{"lastname":"gdgfdfggf","count":1},{"lastName":"sddsdsds","count":1}]
|
||||||
|
|
@ -1 +1 @@
|
||||||
[{"question1":"yes","count":2},{"question1":"no","count":2}]
|
[{"question1":"yes","count":3},{"question1":"no","count":4}]
|
||||||
|
|
@ -1 +1 @@
|
||||||
[{"question2":"Old UI","count":3},{"question2":"New UI","count":1}]
|
[{"question2":"Old UI","count":4},{"question2":"New UI","count":3}]
|
||||||
|
|
@ -1 +1 @@
|
||||||
[{"question3":"on","count":4}]
|
[{"question3":"on","count":7}]
|
||||||
|
|
@ -1 +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}]
|
[{"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},{"question4":"Position of messages on the screen is consistent ","count":1},{"question4":["Prompts for inputs are clear ","System always informs about the progress of the task "],"count":1},{"question4":["Use of terms throughout the system is consistent ","Position of messages on the screen is consistent ","Prompts for inputs are clear "],"count":1}]
|
||||||
|
|
@ -1 +1 @@
|
||||||
[{"question5":"on","count":4}]
|
[{"question5":"on","count":7}]
|
||||||
|
|
@ -1 +1 @@
|
||||||
[{"question6":"yahoo","count":1},{"question6":"kl","count":1},{"question6":"asdasd","count":1},{"question6":"dbgnf","count":1}]
|
[{"question6":"yahoo","count":1},{"question6":"kl","count":1},{"question6":"asdasd","count":1},{"question6":"dbgnf","count":1},{"question6":"vcvvc","count":1},{"question6":"dfbbdbfb","count":1},{"question6":"wcvvvsvdvsdvdvds","count":1}]
|
||||||
|
|
@ -1,24 +1,29 @@
|
||||||
body {
|
body {
|
||||||
background-color: #9caf49;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/* background-image: url("images/bg3.jpg"); */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: "Helvetica ", sans-serif;
|
font-family: "Helvetica ", sans-serif;
|
||||||
font-size: 40px;
|
font-size: 3rem;
|
||||||
color: rgb(45, 43, 170);
|
color: rgb(45, 43, 170);
|
||||||
}
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-size : 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.browser {
|
.browser {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey_body {
|
.survey_body {
|
||||||
background-color: #53dfe4;
|
/* background-color: #53dfe4; */
|
||||||
margin: 20px;
|
/* margin: 20px;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control-1 {
|
.form-control-1 {
|
||||||
|
|
@ -62,7 +67,7 @@ h1 {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
/* .footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -71,7 +76,7 @@ h1 {
|
||||||
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);
|
||||||
|
|
@ -89,4 +94,41 @@ h1 {
|
||||||
|
|
||||||
.btnClass {
|
.btnClass {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Shared classes */
|
||||||
|
.questions{
|
||||||
|
margin: 4% 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Title section */
|
||||||
|
#title {
|
||||||
|
background-color: #F4C983;
|
||||||
|
padding : 3% 7%;
|
||||||
|
}
|
||||||
|
/* Form Section */
|
||||||
|
#form {
|
||||||
|
padding: 3% 7%;
|
||||||
|
text-align: center;
|
||||||
|
/* background-color: #5B6D5B; */
|
||||||
|
/* #F4C983; */
|
||||||
|
}
|
||||||
|
.SurveyIntro{
|
||||||
|
margin: 3%;
|
||||||
|
}
|
||||||
|
.userInfo{
|
||||||
|
margin: 2.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.surveryForm {
|
||||||
|
/* #DDDDDD; */
|
||||||
|
/* background-color: #5B6D5B; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer section */
|
||||||
|
#footer {
|
||||||
|
padding: 3% 4%;
|
||||||
|
background-color: #F4C983;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
|
||||||
279
views/index.html
279
views/index.html
|
|
@ -3,157 +3,172 @@
|
||||||
<html lang="en-US">
|
<html lang="en-US">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
||||||
<title>Survey of Facebook UI</title>
|
<title>Survey of Facebook UI</title>
|
||||||
<meta name="description" content="Survey of Facebook UI">
|
<meta name="description" content="Survey of Facebook UI">
|
||||||
<meta name="author" content="SitePoint">
|
<meta name="author" content="SitePoint">
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
<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://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://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://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- The Nav section for the survey title---->
|
<!-- The Nav section for the survey title---->
|
||||||
<navbar>
|
<section id="title">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<navbar>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<h1>Questionnaire of the Facebook UI/UX</h1>
|
<h1>Questionnaire of the Facebook UI/UX</h1>
|
||||||
<a href="https://www.facebook.com/"><img src="images/fb.png" alt="Facebook" class="fb"></a>
|
<a href="https://www.facebook.com/"><img src="images/fb.png" alt="Facebook" class="fb"></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<img src="images/facebook.jpg" alt="UI" class="facebook">
|
<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>
|
<p style="font-size:150%;">Give us your opinion about <a href="https://www.facebook.com/">Facebook</a> user interface</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</navbar>
|
||||||
</navbar>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- the form section for the survey -->
|
||||||
<section class="survey_body">
|
<section id="form">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!-- The form header -->
|
||||||
|
<div class="SurveyIntro">
|
||||||
<h2>Facebook Evaluation Form</h2>
|
<h2>Facebook Evaluation Form</h2>
|
||||||
<p>Please let us about your thoughts/experience with facebook user interface.</p>
|
<p>Please let us about your thoughts/experience with facebook user interface.</p>
|
||||||
<hr>
|
</div>
|
||||||
|
<hr>
|
||||||
|
|
||||||
<div class="row">
|
<!-- the content of the form -->
|
||||||
<div class="col-2">
|
<!-- action="index.html" method="post" -->
|
||||||
</div>
|
<form class="surveryForm">
|
||||||
<div class="col-8">
|
<!-- User Information -->
|
||||||
<form>
|
<div class="userInfo">
|
||||||
<div class="form-control-1">
|
<h2>User Information</h2>
|
||||||
<label id="name-label">First Name:</label>
|
<p>Please provide your information before filling the survey</p>
|
||||||
<input type="text" name="firstName" placeholder="Enter the First Name" required>
|
</div>
|
||||||
</div>
|
<!-- the text box for the user filling the form -->
|
||||||
<div class="form-control-1">
|
<div class="form-group">
|
||||||
<label id="name-label">Last Name:</label>
|
<div class="row">
|
||||||
<input type="text" name="lastName" placeholder="Enter the Last Name" required>
|
<div class="col-6">
|
||||||
</div>
|
<label for="fnameLabel">First Name</label>
|
||||||
<div class="form-control-1">
|
<input type="text" id="fname" name="firstName" placeholder="First Name" required>
|
||||||
<label id="name-label">E-mail:</label>
|
</div>
|
||||||
<input type="text" name="email" placeholder="Enter the Email" required>
|
<div class="col-6">
|
||||||
</div>
|
<label for="lnameLabel">Last Name</label>
|
||||||
<br>
|
<input type="text" id="lname" name="lastName" placeholder="Last Name" required>
|
||||||
|
</div>
|
||||||
<div id="questions">
|
</div>
|
||||||
<div class="two">
|
</div>
|
||||||
<form>
|
<div class="form-group">
|
||||||
<label id="radio">Do you use the Facebook user interface often?</label>
|
<div class="row">
|
||||||
<br>
|
<!-- style="float: right;" -->
|
||||||
<div style="margin-right: 4px;">
|
<div class="col-6">
|
||||||
<input type="radio" name="question1" value="yes" name="enjoy">
|
<label for="emailLabel">Email</label>
|
||||||
<label for="yes">Yes</label>
|
<input type="text" id="email" name="email" placeholder="Email" required>
|
||||||
<input type="radio" name="question1" value="no" name="enjoy">
|
</div>
|
||||||
<label for="no">No</label>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<hr>
|
||||||
<br>
|
<!-- Questions in the form -->
|
||||||
|
<!-- Quetion 1 and 2 -->
|
||||||
</div>
|
<div class="row questions">
|
||||||
|
<!-- Question 1 -->
|
||||||
<div class="box">
|
<div class="col-6">
|
||||||
<label>Which Facebook user interface do you prefer?</label>
|
<label for="" id="radio"><span>1.</span> Do you use the Facebook user interface often?</label>
|
||||||
<div style="margin-left: 22px;">
|
<br>
|
||||||
<select name="question2">
|
<!-- style="margin-right: 4px;" -->
|
||||||
<option value="" selected=""> Select an Option</option>
|
<div class="row">
|
||||||
<option value="Old UI"> Old UI</option>
|
<div class="col-6">
|
||||||
<option value="New UI"> New UI </option>
|
<input type="radio" name="question1" value="yes">
|
||||||
<option value="No Preference"> No Preference</option>
|
<label for="yes">Yes</label>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="col-6">
|
||||||
|
<input type="radio" name="question1" value="no">
|
||||||
</div>
|
<label for="no">No</label>
|
||||||
|
</div>
|
||||||
<div class="btn-control">
|
</div>
|
||||||
<label id="radio">How difficult is reading characters on the screen?</label><br>
|
</div>
|
||||||
<input type="radio" name="question3"> Very Hard<br>
|
<!-- Question 2 -->
|
||||||
<input type="radio" name="question3"> Somewhat hard<br>
|
<div class="col-6">
|
||||||
<input type="radio" name="question3"> Somewhat easy<br>
|
<label><span>2.</span> Which Facebook user interface do you prefer?</label>
|
||||||
<input type="radio" name="question3"> Very easy<br>
|
<div style="margin-left: 22px;">
|
||||||
</div>
|
<select name="question2">
|
||||||
|
<option value="" selected=""> Select an Option</option>
|
||||||
<div class="btn-control">
|
<option value="Old UI"> Old UI</option>
|
||||||
<label id="checkbox;">Please state your level of agreement for the following:</label><br>
|
<option value="New UI"> New UI </option>
|
||||||
<input type="checkbox" name="question4" value="Use of terms throughout the system is consistent "> Use of terms throughout the system is consistent</input><br>
|
<option value="No Preference"> No Preference</option>
|
||||||
<input type="checkbox" name="question4" value="Position of messages on the screen is consistent "> Position of messages on the screen is consistent</input><br>
|
</select>
|
||||||
<input type="checkbox" name="question4" value="Prompts for inputs are clear "> Prompts for inputs are clear</input><br>
|
</div>
|
||||||
<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>
|
</div>
|
||||||
<input type="checkbox" name="question4" value="Error messages are helpful "> Error messages are helpful</input>
|
</div>
|
||||||
</div>
|
<!-- Question3 and 4 -->
|
||||||
|
<div class="row questions">
|
||||||
<div class="btn-control">
|
<!-- Question 3-->
|
||||||
<label id="radio">In which section of facebook does the user interface look most awful?</label><br>
|
<div class="col-6">
|
||||||
<input type="radio" name="question5"> Photos<br>
|
<label id="radio"><span>3.</span> How difficult is reading characters on the screen?</label><br>
|
||||||
<input type="radio" name="question5"> News<br>
|
<input type="radio" name="question3"> Very Hard<br>
|
||||||
<input type="radio" name="question5"> Messaging<br>
|
<input type="radio" name="question3"> Somewhat hard<br>
|
||||||
<input type="radio" name="question5"> Games<br>
|
<input type="radio" name="question3"> Somewhat easy<br>
|
||||||
</div>
|
<input type="radio" name="question3"> Very easy<br>
|
||||||
|
</div>
|
||||||
<div class="btn-control">
|
<!-- Question 4 -->
|
||||||
<label id="radio">Is there a problem in UI that bothers you?</label><br>
|
<div class="col-6">
|
||||||
<input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
|
<label id="checkbox;"><span>4.</span> Please state your level of agreement for the following:</label><br>
|
||||||
</div>
|
<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>
|
||||||
<br>
|
<input type="checkbox" name="question4" value="Prompts for inputs are clear "> Prompts for inputs are clear</input><br>
|
||||||
<div class="texto">
|
<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>
|
||||||
<p style="font-size:120%;">Please enter your comments here:
|
<input type="checkbox" name="question4" value="Error messages are helpful "> Error messages are helpful</input>
|
||||||
<p>
|
</div>
|
||||||
<textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder="Enter your text...."></textarea>
|
</div>
|
||||||
</div>
|
<!-- Question 5 and 6 -->
|
||||||
<div class="btnClass">
|
<div class="row questions">
|
||||||
<button type="submit" class="button" id="bb">Submit</button>
|
<!-- Question 5-->
|
||||||
</div>
|
<div class="col-6">
|
||||||
|
<label id="radio"><span>5.</span> In which section of facebook does the user interface look most awful?</label><br>
|
||||||
</div>
|
<input type="radio" name="question5"> Photos<br>
|
||||||
|
<input type="radio" name="question5"> News<br>
|
||||||
</form>
|
<input type="radio" name="question5"> Messaging<br>
|
||||||
|
<input type="radio" name="question5"> Games<br>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2">
|
<!-- Question 6 -->
|
||||||
</div>
|
<div class="col-6">
|
||||||
|
<label id="radio"><span>6.</span> 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>
|
||||||
|
</div>
|
||||||
|
<!-- feeback section -->
|
||||||
|
<!-- texto -->
|
||||||
|
<div class="questions">
|
||||||
|
<p style="font-size:120%;">Please write down your comments</p>
|
||||||
|
<textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder=""></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Submit button -->
|
||||||
|
<div class="btnClass">
|
||||||
|
<button type="submit" class="button" id="bb">Submit</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</section>
|
</form>
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
|
||||||
</footer>
|
|
||||||
<!--<div class="footer">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>-->
|
</section>
|
||||||
|
|
||||||
|
<footer id="footer">
|
||||||
|
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="/assets/action.js"></script>
|
<script src="/assets/action.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue