179 lines
7.9 KiB
HTML
179 lines
7.9 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en-US">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Survey of Facebook UI</title>
|
|
<meta name="description" content="Survey of Facebook UI">
|
|
<meta name="author" content="SitePoint">
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<!-- Bootstrap Extensions -->
|
|
<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 form section for the survey -->
|
|
<section id="form">
|
|
<div class="container-fluid">
|
|
<!-- the content of the form -->
|
|
<form class="surveryForm" onsubmit="setTimeout(function(){window.location.reload();},10);">
|
|
<!-- The form header -->
|
|
<div class="surveyIntro">
|
|
<h1>Facebook UI/UX Survey</h1>
|
|
<h3>What are your thoughts/experience with <a href="https://www.facebook.com">facebook</a> user interface?</h3>
|
|
<!-- Carousel for different User Interfaces -->
|
|
<div id="carouselExampleControls" class="carousel slide carouselSection" data-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img src="images/fb.png" class="headerImg1" alt="fb">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="images/facebook_ui.png" alt="UI" class="headerImg2">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="images/facebook.jpg" class="headerImg2" alt="UI">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<!-- User Information -->
|
|
<div class="userInfo">
|
|
<h2>User Information</h2>
|
|
<p>Please provide your information before filling the survey</p>
|
|
</div>
|
|
<!-- the text box for the user filling the form -->
|
|
<div class="form-group">
|
|
<div class="row userLabel">
|
|
<div class="col-6">
|
|
<label for="fnameLabel">First Name</label>
|
|
<input type="text" class="form-control" id="fname" name="firstName" placeholder="First Name" required >
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="lnameLabel">Last Name</label>
|
|
<input type="text" class="form-control" id="lname" name="lastName" placeholder="Last Name" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="row userLabel">
|
|
<div class="col-6">
|
|
<label for="emailLabel">Email</label>
|
|
<input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<!-- Questions in the form -->
|
|
<!-- Quetion 1 and 2 -->
|
|
<div class="row questions">
|
|
<!-- Question 1 -->
|
|
<div class="col-6">
|
|
<label for="" id="radio"><span>1.</span> Do you use the Facebook user interface often?</label>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<input type="radio" name="question1" value="yes">
|
|
<label for="yes">Yes</label>
|
|
</div>
|
|
<div class="col-6">
|
|
<input type="radio" name="question1" value="no">
|
|
<label for="no">No</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Question 2 -->
|
|
<div class="col-5">
|
|
<label><span>2.</span> 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>
|
|
<!-- Question3 and 4 -->
|
|
<div class="row questions">
|
|
<!-- Question 3-->
|
|
<div class="col-6">
|
|
<label id="radio"><span>3.</span> 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>
|
|
<!-- Question 4 -->
|
|
<div class="col-6">
|
|
<label id="checkbox;"><span>4.</span> 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>
|
|
<!-- Question 5 and 6 -->
|
|
<div class="row questions">
|
|
<!-- Question 5-->
|
|
<div class="col-6">
|
|
<label id="radio"><span>5.</span> 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>
|
|
<!-- Question 6 -->
|
|
<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>
|
|
<hr>
|
|
<!-- feeback section -->
|
|
<div class="commentBox">
|
|
<label for="exampleFormControlTextarea1">Please write down your comments</label>
|
|
<textarea class="form-control" name="comments" id="exampleFormControlTextarea1" rows="8"></textarea>
|
|
</div>
|
|
|
|
<!-- Submit button -->
|
|
<div class="btnClass">
|
|
<button type="submit" id="bb" class="btn btn-lg btn-outline-primary">Submit</button>
|
|
</div>
|
|
|
|
<!-- Footer of the form -->
|
|
<footer id="footer">
|
|
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
|
</footer>
|
|
</form>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Sources -->
|
|
<!-- https://cdn.vox-cdn.com/thumbor/8mDnaewReT78MFwXUsOJGp9u64Q=/0x0:2732x1536/920x0/filters:focal(0x0:2732x1536):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/19819048/News_Feed.jpg -->
|
|
|
|
|
|
|
|
|
|
<script src="/assets/action.js"></script>
|
|
</body>
|
|
|
|
</html>
|