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 to the user interface

Browse source
This commit is contained in:
soyed 2021-03-13 23:11:05 -05:00
parent 9e2f13cb5c
commit 85c474c482
2 changed files with 78 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
public/styles.css
View file

@ -4,116 +4,59 @@ body {
h1 { h1 {
font-family: "Helvetica ", sans-serif; font-family: "Helvetica ", sans-serif;
font-size: 3rem; font-size: 3.5rem;
color: rgb(45, 43, 170); color: rgb(45, 43, 170);
padding: 5%;
} }
h2{ h2{
font-size: 2rem; font-size: 2rem;
padding: 1%;
}
h3{
font-size: 1.5rem;
padding: 1.5%;
font-style: italic;
font-weight: normal;
} }
p{ p{
font-size : 1rem; font-size : 1rem;
} }
.browser { hr{
padding-left: 10px; border: dotted #FFD591 6px;
border-bottom: none;
width: 70%;
} }
.survey_body {
/* background-color: #53dfe4; */
/* margin: 20px;
padding-top: 40px;
padding-bottom: 40px; */
}
.form-control {
padding-right: 43%;
text-align: left;
margin: 10px 0px;
font-size: 17px;
}
.texto {
text-align: center;
padding-left: 35px;
}
.two {
text-align: center;
font-size: 20px;
padding-left: 10px;
}
.box {
text-align: center;
font-size: 20px;
padding-bottom: 30px;
padding-left: 10px;
}
.btn-control {
padding-bottom: 20px;
padding-left: 40%;
text-align: left;
font-size: 20px;
}
/* .questions {
padding-top: 20px;
} */
.fb {
width: 10%;
height: auto;
}
.button {
background-color: rgb(87, 139, 216);
border-color: transparent;
margin: 0 auto;
color: #ffffff;
font-size: 20px;
}
.button:hover {
background-color: rgb(103, 163, 253);
color: #ffffff;
border-color: transparent;
}
.btnClass {
text-align: center;
}
/* Shared classes */
/* Title section */
#title {
background-color: #F4C983;
padding : 3% 4%;
}
/* Form Section */ /* Form Section */
#form { #form {
padding: 3% 5%; padding: 7% 15%;
text-align: center; text-align: center;
/* background-color: #5B6D5B; */ background-image: url('images/bg3.jpg');
/* #F4C983; */
} }
.surveryForm { .surveryForm {
/* #DDDDDD; */ /* #DDDDDD; */
background-color: #fafafa; background-color: #fafafa;
border-radius: 2rem;
border: #5B6D5B solid 2rem;
} }
.surveyIntro{ .surveyIntro{
/* margin: 4%; */
/* background-color: #F39189; */
padding : 5%; padding : 5%;
} }
.headerImg{ .carouselSection {
width: 40%; margin: 2% 8%;
} }
.headerImg1{
width: 30%;
}
.headerImg2{
width: 60%;
}
.userInfo{ .userInfo{
margin: 2.5%; margin: 2.5%;
} }
@ -123,27 +66,6 @@ p{
text-align: left; text-align: left;
} }
.questions{
margin: 5% 7%;
text-align: left;
padding-left: 15%;
}
.commentBox{
margin: 4% 15%;
}
.btnClass{
margin: 4%;
}
/* Footer section */
#footer {
padding: 3% 4%;
background-color: #ffd591;
text-align: center;
}
.carousel-control-prev-icon, .carousel-control-prev-icon,
.carousel-control-next-icon { .carousel-control-next-icon {
@ -166,4 +88,40 @@ p{
content: '<'; content: '<';
font-size: 55px; font-size: 55px;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
.commentBox{
margin: 4% 15%;
}
.questions{
margin: 5% 7%;
text-align: left;
padding-left: 10%;
padding-right: 4%;
}
.btnClass {
text-align: center;
margin: 4%;
}
.button {
background-color: rgb(87, 139, 216);
border-color: transparent;
margin: 0 auto;
color: #ffffff;
font-size: 20px;
}
.button:hover {
background-color: rgb(103, 163, 253);
color: #ffffff;
border-color: transparent;
}
/* Footer section */
#footer {
padding: 3% 4%;
background-color: #ffd591;
text-align: center;
}

32
views/index.html
View file

@ -18,7 +18,7 @@
</head> </head>
<body style="background-image: url('images/bg3.jpg');"> <body>
<!-- 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">
@ -27,18 +27,18 @@
<!-- The form header --> <!-- The form header -->
<div class="surveyIntro"> <div class="surveyIntro">
<h1>Facebook UI/UX Survey</h1> <h1>Facebook UI/UX Survey</h1>
<p>What are your thoughts/experience with <a href="https://www.facebook.com">facebook</a> user interface?</p> <h3>What are your thoughts/experience with <a href="https://www.facebook.com">facebook</a> user interface?</h3>
<!-- Carousel for different User Interfaces --> <!-- Carousel for different User Interfaces -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div id="carouselExampleControls" class="carousel slide carouselSection" data-ride="carousel">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div class="carousel-item active">
<img src="images/fb.png" class="headerImg" alt="fb"> <img src="images/fb.png" class="headerImg1" alt="fb">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="images/facebook_ui.png" alt="UI" class="headerImg"> <img src="images/facebook_ui.png" alt="UI" class="headerImg2">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="images/facebook.jpg" class="headerImg" alt="UI"> <img src="images/facebook.jpg" class="headerImg2" alt="UI">
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
@ -50,7 +50,6 @@
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>
<!-- <img src="images/facebook_ui.png" alt="UI" class="headerImg"> -->
</div> </div>
<hr> <hr>
<!-- User Information --> <!-- User Information -->
@ -84,16 +83,15 @@
<!-- Quetion 1 and 2 --> <!-- Quetion 1 and 2 -->
<div class="row questions"> <div class="row questions">
<!-- Question 1 --> <!-- Question 1 -->
<div class="col-5"> <div class="col-6">
<label for="" id="radio"><span>1.</span> Do you use the Facebook user interface often?</label> <label for="" id="radio"><span>1.</span> Do you use the Facebook user interface often?</label>
<br> <br>
<!-- style="margin-right: 4px;" -->
<div class="row"> <div class="row">
<div class="col-5"> <div class="col-6">
<input type="radio" name="question1" value="yes"> <input type="radio" name="question1" value="yes">
<label for="yes">Yes</label> <label for="yes">Yes</label>
</div> </div>
<div class="col-8"> <div class="col-6">
<input type="radio" name="question1" value="no"> <input type="radio" name="question1" value="no">
<label for="no">No</label> <label for="no">No</label>
</div> </div>
@ -115,7 +113,7 @@
<!-- Question3 and 4 --> <!-- Question3 and 4 -->
<div class="row questions"> <div class="row questions">
<!-- Question 3--> <!-- Question 3-->
<div class="col-5"> <div class="col-6">
<label id="radio"><span>3.</span> How difficult is reading characters on the screen?</label><br> <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"> Very Hard<br>
<input type="radio" name="question3"> Somewhat hard<br> <input type="radio" name="question3"> Somewhat hard<br>
@ -123,7 +121,7 @@
<input type="radio" name="question3"> Very easy<br> <input type="radio" name="question3"> Very easy<br>
</div> </div>
<!-- Question 4 --> <!-- Question 4 -->
<div class="col-5"> <div class="col-6">
<label id="checkbox;"><span>4.</span> Please state your level of agreement for the following:</label><br> <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="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="Position of messages on the screen is consistent "> Position of messages on the screen is consistent</input><br>
@ -135,7 +133,7 @@
<!-- Question 5 and 6 --> <!-- Question 5 and 6 -->
<div class="row questions"> <div class="row questions">
<!-- Question 5--> <!-- Question 5-->
<div class="col-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> <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"> Photos<br>
<input type="radio" name="question5"> News<br> <input type="radio" name="question5"> News<br>
@ -143,24 +141,20 @@
<input type="radio" name="question5"> Games<br> <input type="radio" name="question5"> Games<br>
</div> </div>
<!-- Question 6 --> <!-- Question 6 -->
<div class="col-5"> <div class="col-6">
<label id="radio"><span>6.</span> Is there a problem in UI that bothers you?</label><br> <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"> <input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
</div> </div>
</div> </div>
<hr> <hr>
<!-- feeback section --> <!-- feeback section -->
<!-- texto -->
<div class="commentBox"> <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> <label for="exampleFormControlTextarea1">Please write down your comments</label>
<textarea class="form-control" name="comments" id="exampleFormControlTextarea1" rows="8"></textarea> <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" >Submit</button> -->
<button type="submit" id="bb" class="btn btn-lg btn-outline-primary">Submit</button> <button type="submit" id="bb" class="btn btn-lg btn-outline-primary">Submit</button>
</div> </div>