batuhan-basoglu/Questionnaire-of-the-Facebook-UI-UX-Website-Alternative-with-Analysis-Function
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added things

Browse source
This commit is contained in:
ruchi 2021-03-11 18:56:57 -05:00
parent 6d3ba1a714
commit 0ffd256672
25 changed files with 365 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

159
views/index.html Normal file
View 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>

46
views/niceSurvey.html
View file

@ -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>

98
views/showResults.ejs
View file

@ -1,27 +1,101 @@
<html lang="en-US">
<head>
<title>Survey Analysis</title>
</head>
<body>
<h1>Survey analysis</h1>
<h2>Colors</h2>
<h2>First Name</h2>
<ul>
<% for (var i=0; i<results[0].length; i++){ %>
<li><%= results[0][i].color %> : <%= results[0][i].count %></li>
<% } %>
<% for (var i=0; i<results[0].length; i++){ %>
<li>
<%= results[0][i].firstName %> :
<%= results[0][i].count %>
</li>
<% } %>
</ul>
<h2>Fruits</h2>
<h2>Last Name</h2>
<ul>
<% for (var i=0; i<results[1].length; i++){ %>
<li><%= results[1][i].fruit %> : <%= results[1][i].count %></li>
<% } %>
<% for (var i=0; i<results[1].length; i++){ %>
<li>
<%= results[1][i].lastName %> :
<%= results[1][i].count %>
</li>
<% } %>
</ul>
<h2>Animals</h2>
<h2>Email</h2>
<ul>
<% for (var i=0; i<results[2].length; i++){ %>
<li><%= results[2][i].animal %> : <%= results[2][i].count %></li>
<% } %>
<% for (var i=0; i<results[2].length; i++){ %>
<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>
</body>
</html>