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

modification of user interface of the survey

Browse source
This commit is contained in:
soyed 2021-03-13 03:16:43 -05:00
parent b90d24396d
commit 0f86a7faeb
3 changed files with 86 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/facebook_ui.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

57
public/styles.css
View file

@ -58,26 +58,15 @@ p{
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 {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
background-color: rgb(87, 139, 216);
color: rgb(255, 255, 255);
text-align: center;
} */
.button { .button {
background-color: rgb(87, 139, 216); background-color: rgb(87, 139, 216);
border-color: transparent; border-color: transparent;
@ -97,33 +86,55 @@ p{
} }
/* Shared classes */ /* Shared classes */
.questions{
margin: 4% 3%;
}
/* Title section */ /* Title section */
#title { #title {
background-color: #F4C983; background-color: #F4C983;
padding : 3% 7%; padding : 3% 4%;
} }
/* Form Section */ /* Form Section */
#form { #form {
padding: 3% 7%; padding: 3% 5%;
text-align: center; text-align: center;
/* background-color: #5B6D5B; */ /* background-color: #5B6D5B; */
/* #F4C983; */ /* #F4C983; */
} }
.SurveyIntro{ .surveryForm {
margin: 3%; /* #DDDDDD; */
background-color: #DDDDDD;
}
.surveyIntro{
/* margin: 4%; */
/* background-color: #F39189; */
padding : 5%;
}
.headerImg{
width: 40%;
} }
.userInfo{ .userInfo{
margin: 2.5%; margin: 2.5%;
} }
.surveryForm { .userLabel{
/* #DDDDDD; */ margin: 3% 20%;
/* background-color: #5B6D5B; */ text-align: left;
}
.questions{
margin: 5% 7%;
text-align: left;
}
.commentBox{
margin: 4% 15%;
}
.btnClass{
margin: 4%;
} }
/* Footer section */ /* Footer section */

93
views/index.html
View file

@ -4,13 +4,14 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<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">
<!-- Stylesheets -->
<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">
<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://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>
@ -18,37 +19,40 @@
</head> </head>
<body> <body>
<!-- The Nav section for the survey title---->
<section id="title">
<div class="container-fluid">
<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>
</div>
</section>
<!-- the form section for the survey --> <!-- the form section for the survey -->
<section id="form"> <section id="form">
<div class="container-fluid"> <div class="container-fluid">
<!-- The form header -->
<div class="SurveyIntro">
<h2>Facebook Evaluation Form</h2>
<p>Please let us about your thoughts/experience with facebook user interface.</p>
</div>
<hr>
<!-- the content of the form --> <!-- the content of the form -->
<!-- action="index.html" method="post" -->
<form class="surveryForm" onsubmit="setTimeout(function(){window.location.reload();},10);"> <form class="surveryForm" onsubmit="setTimeout(function(){window.location.reload();},10);">
<!-- 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">
<img src="images/fb.png" class="headerImg" alt="...">
</div>
<div class="carousel-item">
<img src="images/facebook_ui.png" alt="UI" class="headerImg">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</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>
<!-- User Information --> <!-- User Information -->
<div class="userInfo"> <div class="userInfo">
<h2>User Information</h2> <h2>User Information</h2>
@ -56,23 +60,22 @@
</div> </div>
<!-- the text box for the user filling the form --> <!-- the text box for the user filling the form -->
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row userLabel">
<div class="col-6"> <div class="col-6">
<label for="fnameLabel">First Name</label> <label for="fnameLabel">First Name</label>
<input type="text" id="fname" name="firstName" placeholder="First Name" required> <input type="text" class="form-control" id="fname" name="firstName" placeholder="First Name" required>
</div> </div>
<div class="col-6"> <div class="col-6">
<label for="lnameLabel">Last Name</label> <label for="lnameLabel">Last Name</label>
<input type="text" id="lname" name="lastName" placeholder="Last Name" required> <input type="text" class="form-control" id="lname" name="lastName" placeholder="Last Name" required>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row userLabel">
<!-- style="float: right;" -->
<div class="col-6"> <div class="col-6">
<label for="emailLabel">Email</label> <label for="emailLabel">Email</label>
<input type="text" id="email" name="email" placeholder="Email" required> <input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
</div> </div>
</div> </div>
</div> </div>
@ -145,26 +148,34 @@
<input type="text" name="question6" placeholder="Enter the name of your problem" size="43"> <input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
</div> </div>
</div> </div>
<hr>
<!-- feeback section --> <!-- feeback section -->
<!-- texto --> <!-- texto -->
<div class="questions"> <div class="commentBox">
<p style="font-size:120%;">Please write down your comments</p> <!-- <p>Please write down your comments</p>
<textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder=""></textarea> <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>
</div> </div>
<!-- Submit button --> <!-- Submit button -->
<div class="btnClass"> <div class="btnClass">
<button type="submit" class="button" id="bb">Submit</button> <!-- <button type="submit" class="button" >Submit</button> -->
<button type="submit" id="bb" class="btn btn-lg btn-outline-primary">Submit</button>
</div> </div>
<!-- Footer of the form -->
<footer id="footer">
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
</footer>
</form> </form>
</div> </div>
</section> </section>
<footer id="footer"> <!-- Sources -->
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p> <!-- 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 -->
</footer>