2021-03-11 23:56:57 +00:00
<!doctype html>
< html lang = "en-US" >
< head >
2021-03-13 00:14:10 +00:00
< meta charset = "utf-8" >
2021-03-11 23:56:57 +00:00
2021-03-13 00:14:10 +00:00
< title > Survey of Facebook UI< / title >
< meta name = "description" content = "Survey of Facebook UI" >
< meta name = "author" content = "SitePoint" >
2021-03-13 08:16:43 +00:00
<!-- Stylesheets -->
2021-03-13 00:14:10 +00:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
2021-03-13 08:16:43 +00:00
< link rel = "stylesheet" href = "styles.css" >
<!-- Bootstrap Extensions -->
2021-03-13 00:14:10 +00:00
< 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 >
2021-03-11 23:56:57 +00:00
< / head >
2021-03-13 14:29:22 +00:00
< body style = "background-image: url('images/bg3.jpg');" >
2021-03-13 00:14:10 +00:00
<!-- the form section for the survey -->
< section id = "form" >
< div class = "container-fluid" >
<!-- the content of the form -->
2021-03-13 04:31:28 +00:00
< form class = "surveryForm" onsubmit = "setTimeout(function(){window.location.reload();},10);" >
2021-03-13 08:16:43 +00:00
<!-- The form header -->
< div class = "surveyIntro" >
< h1 > Facebook UI/UX Survey< / h1 >
< p > What are your thoughts/experience with < a href = "https://www.facebook.com" > facebook< / a > user interface?< / p >
<!-- Carousel for different User Interfaces -->
< div id = "carouselExampleControls" class = "carousel slide" data-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active" >
2021-03-13 14:29:22 +00:00
< img src = "images/fb.png" class = "headerImg" alt = "fb" >
2021-03-13 08:16:43 +00:00
< / div >
< div class = "carousel-item" >
< img src = "images/facebook_ui.png" alt = "UI" class = "headerImg" >
< / div >
< div class = "carousel-item" >
2021-03-13 14:29:22 +00:00
< img src = "images/facebook.jpg" class = "headerImg" alt = "UI" >
2021-03-13 08:16:43 +00:00
< / 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 >
<!-- <img src="images/facebook_ui.png" alt="UI" class="headerImg"> -->
< / div >
< hr >
2021-03-13 00:14:10 +00:00
<!-- 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" >
2021-03-13 08:16:43 +00:00
< div class = "row userLabel" >
2021-03-13 00:14:10 +00:00
< div class = "col-6" >
< label for = "fnameLabel" > First Name< / label >
2021-03-13 14:29:22 +00:00
< input type = "text" class = "form-control" id = "fname" name = "firstName" placeholder = "First Name" required >
2021-03-11 23:56:57 +00:00
< / div >
2021-03-13 00:14:10 +00:00
< div class = "col-6" >
< label for = "lnameLabel" > Last Name< / label >
2021-03-13 08:16:43 +00:00
< input type = "text" class = "form-control" id = "lname" name = "lastName" placeholder = "Last Name" required >
2021-03-11 23:56:57 +00:00
< / div >
2021-03-13 00:14:10 +00:00
< / div >
< / div >
< div class = "form-group" >
2021-03-13 08:16:43 +00:00
< div class = "row userLabel" >
2021-03-13 00:14:10 +00:00
< div class = "col-6" >
< label for = "emailLabel" > Email< / label >
2021-03-13 08:16:43 +00:00
< input type = "text" class = "form-control" id = "email" name = "email" placeholder = "Email" required >
2021-03-11 23:56:57 +00:00
< / div >
2021-03-13 00:14:10 +00:00
< / div >
< / div >
< hr >
<!-- Questions in the form -->
<!-- Quetion 1 and 2 -->
< div class = "row questions" >
<!-- Question 1 -->
2021-03-13 14:29:22 +00:00
< div class = "col-5" >
2021-03-13 00:14:10 +00:00
< label for = "" id = "radio" > < span > 1.< / span > Do you use the Facebook user interface often?< / label >
2021-03-11 23:56:57 +00:00
< br >
2021-03-13 00:14:10 +00:00
<!-- style="margin - right: 4px;" -->
< div class = "row" >
2021-03-13 14:29:22 +00:00
< div class = "col-5" >
2021-03-13 00:14:10 +00:00
< input type = "radio" name = "question1" value = "yes" >
< label for = "yes" > Yes< / label >
< / div >
2021-03-13 14:29:22 +00:00
< div class = "col-8" >
2021-03-13 00:14:10 +00:00
< input type = "radio" name = "question1" value = "no" >
< label for = "no" > No< / label >
< / div >
2021-03-11 23:56:57 +00:00
< / div >
2021-03-13 00:14:10 +00:00
< / div >
<!-- Question 2 -->
2021-03-13 14:29:22 +00:00
< div class = "col-5" >
2021-03-13 00:14:10 +00:00
< 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 >
2021-03-11 23:56:57 +00:00
< / div >
2021-03-13 00:14:10 +00:00
< / div >
< / div >
<!-- Question3 and 4 -->
< div class = "row questions" >
<!-- Question 3 -->
2021-03-13 14:29:22 +00:00
< div class = "col-5" >
2021-03-13 00:14:10 +00:00
< 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 -->
2021-03-13 14:29:22 +00:00
< div class = "col-5" >
2021-03-13 00:14:10 +00:00
< 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 -->
2021-03-13 14:29:22 +00:00
< div class = "col-5" >
2021-03-13 00:14:10 +00:00
< 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 -->
2021-03-13 14:29:22 +00:00
< div class = "col-5" >
2021-03-13 00:14:10 +00:00
< 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 >
2021-03-13 08:16:43 +00:00
< hr >
2021-03-13 00:14:10 +00:00
<!-- feeback section -->
<!-- texto -->
2021-03-13 08:16:43 +00:00
< div class = "commentBox" >
<!-- <p>Please write down your comments</p>
< textarea rows = "10" cols = "100" maxlength = "3000" name = "comments" placeholder = "" > < / textarea > -->
< label for = "exampleFormControlTextarea1" > Please write down your comments< / label >
< textarea class = "form-control" name = "comments" id = "exampleFormControlTextarea1" rows = "8" > < / textarea >
2021-03-11 23:56:57 +00:00
< / div >
2021-03-13 00:14:10 +00:00
<!-- Submit button -->
< div class = "btnClass" >
2021-03-13 08:16:43 +00:00
<!-- <button type="submit" class="button" >Submit</button> -->
< button type = "submit" id = "bb" class = "btn btn-lg btn-outline-primary" > Submit< / button >
2021-03-13 00:14:10 +00:00
< / div >
2021-03-11 23:56:57 +00:00
2021-03-13 08:16:43 +00:00
<!-- Footer of the form -->
< footer id = "footer" >
< p > Website created by Ruchira, Sam, Batuhan, and Kene< / p >
< / footer >
2021-03-13 00:14:10 +00:00
< / form >
2021-03-11 23:56:57 +00:00
< / div >
2021-03-13 00:14:10 +00:00
< / section >
2021-03-13 08:16:43 +00:00
<!-- 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 -->
2021-03-11 23:56:57 +00:00
2021-03-13 00:14:10 +00:00
< script src = "/assets/action.js" > < / script >
2021-03-11 23:56:57 +00:00
< / body >
2021-03-13 00:14:10 +00:00
< / html >
