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

Improved the UI

Browse source
This commit is contained in:
Batuhan Berk Başoğlu 2021-03-13 09:29:22 -05:00
parent 0f86a7faeb
commit 9e2f13cb5c
2 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
public/styles.css
View file

@ -26,11 +26,11 @@ p{
padding-bottom: 40px; */ padding-bottom: 40px; */
} }
.form-control-1 { .form-control {
padding-right: 43%; padding-right: 43%;
text-align: right; text-align: left;
margin: 10px 0px; margin: 10px 0px;
font-size: 20px; font-size: 17px;
} }
.texto { .texto {
@ -103,7 +103,7 @@ p{
} }
.surveryForm { .surveryForm {
/* #DDDDDD; */ /* #DDDDDD; */
background-color: #DDDDDD; background-color: #fafafa;
} }
.surveyIntro{ .surveyIntro{
@ -126,6 +126,7 @@ p{
.questions{ .questions{
margin: 5% 7%; margin: 5% 7%;
text-align: left; text-align: left;
padding-left: 15%;
} }
@ -140,6 +141,29 @@ p{
/* Footer section */ /* Footer section */
#footer { #footer {
padding: 3% 4%; padding: 3% 4%;
background-color: #F4C983; background-color: #ffd591;
text-align: center; text-align: center;
} }
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: rgb(0, 0, 0);
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: rgb(0, 0, 0);
}

24
views/index.html
View file

@ -18,7 +18,7 @@
</head> </head>
<body> <body style="background-image: url('images/bg3.jpg');">
<!-- 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">
@ -32,13 +32,13 @@
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div id="carouselExampleControls" class="carousel slide" 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="..."> <img src="images/fb.png" class="headerImg" 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="headerImg">
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="..." class="d-block w-100" alt="..."> <img src="images/facebook.jpg" class="headerImg" 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">
@ -63,7 +63,7 @@
<div class="row userLabel"> <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" class="form-control" 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>
@ -84,23 +84,23 @@
<!-- Quetion 1 and 2 --> <!-- Quetion 1 and 2 -->
<div class="row questions"> <div class="row questions">
<!-- Question 1 --> <!-- Question 1 -->
<div class="col-6"> <div class="col-5">
<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;" --> <!-- style="margin-right: 4px;" -->
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-5">
<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-6"> <div class="col-8">
<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>
</div> </div>
</div> </div>
<!-- Question 2 --> <!-- Question 2 -->
<div class="col-6"> <div class="col-5">
<label><span>2.</span> Which Facebook user interface do you prefer?</label> <label><span>2.</span> Which Facebook user interface do you prefer?</label>
<div style="margin-left: 22px;"> <div style="margin-left: 22px;">
<select name="question2"> <select name="question2">
@ -115,7 +115,7 @@
<!-- Question3 and 4 --> <!-- Question3 and 4 -->
<div class="row questions"> <div class="row questions">
<!-- Question 3--> <!-- Question 3-->
<div class="col-6"> <div class="col-5">
<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 +123,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-6"> <div class="col-5">
<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 +135,7 @@
<!-- Question 5 and 6 --> <!-- Question 5 and 6 -->
<div class="row questions"> <div class="row questions">
<!-- Question 5--> <!-- Question 5-->
<div class="col-6"> <div class="col-5">
<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,7 +143,7 @@
<input type="radio" name="question5"> Games<br> <input type="radio" name="question5"> Games<br>
</div> </div>
<!-- Question 6 --> <!-- Question 6 -->
<div class="col-6"> <div class="col-5">
<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>