Web Design and Development

4COSC011W

Report

Author: Ameet Bassan

Student ID: W1827257

Group Number: 4CSE10 & 4CSE12

Thur2DEMM1

Student Role: 3

Link(s) to WebSite
URL:

Quiz page: https://w1827257.users.ecs.westminster.ac.uk/QUIZ/index.html

About us: https://w1827257.users.ecs.westminster.ac.uk/ABOUT%20US/indexsd.html

Editors page: https://w1827155.users.ecs.westminster.ac.uk/UmarCW/Editorspage.html

1.
2. Introduction
2. Technical Discussion
• Quiz
3. Webpage Validation Statement
4. Janet
References
Appendices
Appendix A: Code
Appendix B: Screenshots
Appendix C: Screenshots - Webpage Validation Evidence
Appendix D: Individual Statement

1. Introduction
Me and my group decided to create a website related to football. The people in the group were:
- Umar Hussain: student 1,
- Shanojan Sivalokanathan: student 2,
- Ameet Bassan: student 3,
- Usman Khan Muhamed: student 4.

Group Coursework Meetings

1 Date & Time 08/03/22 : 1pm-2pm (in
person)
Objective: Website topic
Attended: Yes
Your Contribution: Suggested football or iPhone
website topic, Decided on
selling shirts
2 Date & Time: 10/03/22 : 4pm-5pm (in
person)
Objective: Research related websites
Attended: Yes
Your Contribution: Researched football related
quizzes and conferred with
team.
3 Date & Time: 15/03/22 : 1pm-2pm
Objective: Discussing theme
Attended: Yes
 Your Contribution: I suggested to use green
colours as the background
4 Date & Time: 17/03/22 : 4pm-5pm (in
person)
Objective: Discussing navigation bar /
Individual layout
Attended: Yes
Your Contribution: I suggested the title of the
navigation bar
5 Date & Time: 22/03/22 : 3pm-4pm (online)
Objective: Editors page / uploading to
server
Attended: Yes

Your Contribution: Uploaded my url via discord

after I created url
6 Date & Time: 26/03/22 : 4pm-5pm (online)
Objective: Linking sites together

Attended: Yes

Your Contribution: Filled in the links to the

navigation bar

2. Technical Discussion
Max 1000 words

Section guidelines:
• Discuss the development of the tasks that you were allocated. This technical discussion must
include the approach taken, and explanations of how the required functionality was implemented.
Illustrate your explanation with code snippets and screenshots. Also explain the difficulties you
faced and how you solved them.
• Illustrate your technical discussion with screenshots and code samples.
• Discuss only the following tasks that you were allocated.
• State if any of your allocated tasks were not completed.

Student 3:
• Quiz
• Student details

(All students) Page Editor Page, Main (Home) Page, Extra content page relevant to topic.

One of my tasks was to create a page which included information about the whole of the group. For
this I had to upload photos of all the group members into a folder. I then had to link the images in the
code as shown below.
I had to then create a rollover effect so that when the user is to hover over the image, the image will
fade and show details of the student which is being hovered over.

I also had to create a quiz in which I had to use radio buttons as shown below for example:
I listed the question which would be shown in the quiz above and the answers were linked to a class
with a specific name for the answer.

I had to create a function in which if the user answered correctly, they would get 2 points and if the
answered wrong then they would have 1 point deducted.

3. Webpage Validation Statement

- Quiz page: 1 error
- About us page: 1 error
- Editors page: 0 errors

4. Janet

My website pages are complying with Janets policies. I haven't stolen information from anyone. If I
have used information it is referenced. There is no misuse in my work with the web pages being made
by myself and my group members. The networks which were used are all safe. I have followed data
protection act and the copyright act as there is no use of plagiarism in my work with any use of
resources being referenced.

References
To create Radio buttons:
https://drive.google.com/file/d/140dFTOFQ4LmBhXH9PkBvVSyYPwCj52Po/view
Placing images side by side and hover over:
https://www.w3schools.com/howto/howto_css_image_overlay.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side

Appendices

Appendix A: Code
Filename: Index.html
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="https://w1822986.users.ecs.westminster.ac.uk/WebDevCW/coursework/main.html"
class="logo">Football Direct</a>

<nav class="navbar">
<ul>
<li><a href="https://w1822986.users.ecs.westminster.ac.uk/WebDevCW/coursework/main.html"
>Home</a></li>
<li><a href="https://w1827155.users.ecs.westminster.ac.uk/UmarCW/Buypage/
Buypage.html">Store</a></li>
<li><a href="https://w1827257.users.ecs.westminster.ac.uk/QUIZ/index.html"
class="active">Quiz</a></li>
<li><a href="https://w1827059.users.ecs.westminster.ac.uk/WebDevCW2022/Cw1.html"
>Gallery</a></li>
<div class="dropdown">
<button class="dropbtn">About us
</button>
<div class="dropdown-content">
<a href="https://w1827257.users.ecs.westminster.ac.uk/ABOUT%20US/indexsd.html">About
us</a>
<a href="https://w1827155.users.ecs.westminster.ac.uk/UmarCW/Editorspage.html">Editors
Page</a>
</div>
</div>
<li><a href="https://w1822986.users.ecs.westminster.ac.uk/WebDevCW/coursework/main.html"
>Contact</a></li>
<li><a href="https://w1827059.users.ecs.westminster.ac.uk/WebDevCW2022/Sitemap"
>Sitemap</a></li>
</ul>
</nav>
</header>

<h1> Football Quiz</h1>

</div>
<div class="container" id="question_1">
Q1: Who won the premier league in 2020/2021?<hr>
<input type="radio" class="question1" name="Manchester City">Manchester City<br>
<input type="radio" class="question1" name="Manchester United">Manchester united<br>
<input type="radio" class="question1" name="Liverpool">Liverpool<br>
<input type="radio" class="question1" name="Arsenal">Arsenal<br>
<button class="next" onclick="next(1)">NEXT</button>
</div>

<div class="container">
Q2: Which premier league team came second in 2020/2021?<hr>
<input type="radio" class="question2" name="Manchester City">Manchester City<br>
 <input type="radio" class="question2" name="Manchester United">Manchester United<br>
<input type="radio" class="question2" name="Liverpool">Liverpool<br>
<input type="radio" class="question2" name="Arsenal">Arsenal<br>
<button class="next" onclick="next(2)">NEXT</button>
</div>

<div class="container">
Q3: Who manages Arsenal?<hr>
<input type="radio" class="question3" name="Klopp">Klopp<br>
<input type="radio" class="question3" name="Pep">Pep<br>
<input type="radio" class="question3" name="Conte">Conte<br>
<input type="radio" class="question3" name="Arteta">Arteta<br>
<button class="next" onclick="next(3)">NEXT</button>
</div>

<div class="container">
Q4: How many players does each team need to have?<hr>
<input type="radio" class="question4" name="14">14<br>
<input type="radio" class="question4" name="12">12<br>
<input type="radio" class="question4" name="11">11<br>
<input type="radio" class="question4" name="10">10<br>
<button class="next" onclick="next(4)">NEXT</button>
</div>

<div class="container">
Q5: Who won the champions league in 2020/21?<hr>
<input type="radio" class="question5" name="Manchester City">Manchester City<br>
<input type="radio" class="question5" name="Chelsea">Chelsea<br>
<input type="radio" class="question5" name="Barcelona">Barcelona<br>
<input type="radio" class="question5" name="PSG">PSG<br>
<button class="next" onclick="next(5)">NEXT</button>
</div>

<div class="container">
Q6: Which colour is Manchester United's kit?<hr>
<input type="radio" class="question6" name="Blue">Blue<br>
<input type="radio" class="question6" name="Green">Green<br>
<input type="radio" class="question6" name="Red">Red<br>
<input type="radio" class="question6" name="Yellow">Yellow<br>
<button class="next" onclick="next(6)">NEXT</button>
</div>

<div class="container">
Q7: Which team got relegated in 2020/21?<hr>
<input type="radio" class="question7" name="Newcastle">Newcastle<br>
<input type="radio" class="question7" name="Norwhich">Norwhich<br>
<input type="radio" class="question7" name="Southampton">Southampton<br>
<input type="radio" class="question7" name="Fulham">Fulham<br>
<button class="next" onclick="next(7)">NEXT</button>
</div>

<div class="container">
Q8: Who plays at the Emirates stadium?<hr>
<input type="radio" class="question8" name="Manchester City">Manchester City<br>
<input type="radio" class="question8" name="Manchester United">Manchester United<br>
<input type="radio" class="question8" name="Liverpool">Liverpool<br>
<input type="radio" class="question8" name="Arsenal">Arsenal<br>
<button class="next" onclick="next(8)">NEXT</button>
</div>
 <div class="container">
Q9: What colour does the refree wear?<hr>
<input type="radio" class="question9" name="Blue">Blue<br>
<input type="radio" class="question9" name="Black">Black<br>
<input type="radio" class="question9" name="Red">Red<br>
<input type="radio" class="question9" name="Green">Green<br>
<button class="next" onclick="next(9)">NEXT</button>
</div>

<div class="container">
Q10: Who scored the most goals in 2020/21?<hr>
<input type="radio" class="question10" name="Salah">Salah<br>
<input type="radio" class="question10" name="Kane">Kane<br>
<input type="radio" class="question10" name="Aubameyang">Aubameyang<br>
<input type="radio" class="question10" name="Son">Son<br>
<button onclick="next(10)">SUBMIT QUIZ</button>
</div>
<script src="script.js"></script>
</body>
</html>

Filename: script.js
Code:
var score = 0;

function getRadioValue( radioArray ) {

for ( let i = 0; i < radioArray.length; i++ ) {
if ( radioArray[ i ].checked ) {
return radioArray[ i ].name;
}
}
return "";
}

// displaying the first block of question

document.getElementsByClassName('container')[0].style.display = "block";

const answers = ["Manchester City",

"Manchester United",
"Arteta",
"11",
"Chelsea",
"Red",
"Fulham",
"Arsenal",
"Black",
"Salah",
];

var resultsText = "";

// DEFINE THE NEXT FUNCTION

function next(id) {
// check to see if the selected answer matches the answer from the answers array

//if it does, add 2 to the score and add correct to the results string
const selectedAns = getRadioValue(document.getElementsByClassName('question'+ id))
if (selectedAns != "") {
if (selectedAns == answers[id-1]) {
 score = score + 2;
resultsText = resultsText + "Question " + id + ": Correct -> " + answers[id-1] + "\n";
} else {
//if it does not, minus 1 from the score and add incorrect to the results string
score--;
resultsText = resultsText + "Question " + id + ": Incorrect -> " + answers[id-1] + "\n";
}

// go to the next question

if (id != 10) {
document.getElementsByClassName('container')[id-1].style.display = "none";
document.getElementsByClassName('container')[id].style.display = "block";
} else {
result()
}
} else {
alert("You must select an option")
}

// show alert with the resultsText string containing all correct and incorrect questions
function result() {
alert("Your Score is: "+ score + "!\n\n" +
"Results \n---------\n" + resultsText);
}

Filename: style.css
Code:
/* nav css*/
header{
width: 100%;
background: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
z-index: 1000;
transition: .2s;
}

header .navbar ul{

display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}

header .navbar ul li{

margin: 0 1rem;
}

header .navbar ul li a{
color: white;
font-size: 1.5rem;
}
header .navbar ul li .active,
header .navbar ul li a:hover{
color: #43D684;
}

.dropdown .dropbtn{
font-size: 1.5rem;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 1.5rem;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

header .logo{
font-size: 3rem;
font-weight: bold;
letter-spacing: .3rem;
color: #43D684;
text-transform: uppercase;
}
/* end of nav */

.container {
border: 3px solid black;
border-radius: 10px;
width: 60%;
padding: 20px;
display: none;
}

button {
margin-top: 10px;
}

Filename: Indexsd.html
Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Details</title>
<link rel="stylesheet" href="stylesd.css">
</head>

<body>

<header>
<a href="https://w1822986.users.ecs.westminster.ac.uk/WebDevCW/coursework/main.html"
class="logo">Football Direct</a>

<nav class="navbar">
<ul>
<li><a href="https://w1822986.users.ecs.westminster.ac.uk/WebDevCW/coursework/
main.html">Home</a></li>
<li><a href="https://w1827155.users.ecs.westminster.ac.uk/UmarCW/Buypage/
Buypage.html">Store</a></li>
<li><a href="https://w1827257.users.ecs.westminster.ac.uk/QUIZ/index.html">Quiz</a></li>
<li><a
href="https://w1827059.users.ecs.westminster.ac.uk/WebDevCW2022/Cw1.html">Gallery</a></li>
<div class="dropdown">
<button class="dropbtn">About us
</button>
<div class="dropdown-content">
<a href="https://w1827257.users.ecs.westminster.ac.uk/ABOUT%20US/indexsd.html"
class="active">About us</a>
<a href="https://w1827155.users.ecs.westminster.ac.uk/UmarCW/Editorspage.html">Editors
Page</a>
</div>
</div>
<li><a href="https://w1822986.users.ecs.westminster.ac.uk/WebDevCW/coursework/main.html"
>Contact</a></li>
<li><a href="https://w1827059.users.ecs.westminster.ac.uk/WebDevCW2022/Sitemap"
>Sitemap</a></li>
</ul>
</nav>
</header>
<section class="home" id="home">

<div class="content">
<h1>About us</h1>
</div>

<div class="row">
<div class="column">
 <div class="container">
<img src="images/ameet_image.png" alt="Ameet" class="image">
<div class="overlay">
<div class="text">Ameet Bassan: Role 3</div>
</div>
</div>
</div>
<div class="column">
<div class="container">
<img src="images/shanojan_image.png" alt="Shanojan" class="image">
<div class="overlay">
<div class="text">Shanojan: Role 2</div>
</div>
</div>
</div>
<div class="column">
<div class="container">
<img src="images/umar_image.png" alt="Umar" class="image">
<div class="overlay">
<div class="text">Umar Hussain: Role 1</div>
</div>
</div>
</div>
<div class="column">
<div class="container">
<img src="images/usman_image.png" alt="Usman" class="image">
<div class="overlay">
<div class="text">Usman Khan: Role 4</div>
</div>
</div>
</div>
</div>
</section>

</body>

</html>

Filename: stylised.css
Code:
/* nav css*/
header{
width: 100%;
background: black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
z-index: 1000;
transition: .2s;
}

header .navbar ul{

display: flex;
 align-items: center;
justify-content: space-between;
list-style: none;
}

header .navbar ul li{

margin: 0 1rem;
}

header .navbar ul li a{
color: white;
font-size: 1.5rem;
}

header .navbar ul li .active,

header .navbar ul li a:hover{
color: #43D684;
}

.dropdown .dropbtn{
font-size: 1.5rem;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

header .logo{
font-size: 3rem;
font-weight: bold;
letter-spacing: .3rem;
color: #43D684;
text-transform: uppercase;

}
/* ------ end of nav ----------*/

/* ------ Student info ------- */

*{
font-family: 'Roboto', sans-serif;
text-decoration: none;
outline: none;
margin: 0; padding: 0;
box-sizing: border-box;
font-weight: 600;

header{
width: 100%;
background: black;
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
z-index: 1000;
transition: .2s;
}

header .navbar ul{

display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}

header .navbar ul li{

 margin: 0 1rem;
}

header .navbar ul li a{
color: white;
font-size: 1.5rem;
}

header .navbar ul li .active,

header .navbar ul li a:hover{
color: #43D684;
}

.dropdown .dropbtn{
font-size: 1.5rem;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 1.5rem;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
 display: block;
}

header .logo{
font-size: 3rem;
font-weight: bold;
letter-spacing: .3rem;
color: #43D684;
text-transform: uppercase;
}

.home{
min-height: 100vh;
background:url(pitch1.jpg) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 0;
overflow:hidden;
position: relative;
}

.home .content{
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
padding-top: 14rem;
padding-bottom: 8rem;
text-align: center;
}

.home .content h1{

font-size: 5rem;
color: #43D684;
padding:0 1rem;
text-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
text-transform: uppercase;
}

.home .content p{
font-size: 2rem;
color:#eee;
padding:1rem 25rem;
}

.home .box-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.home .box-container .box {

height:20rem;
width:25rem;
background:#fff;
text-align: center;
border-radius: 1rem;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.5);
margin: 2rem;
cursor: pointer;
}

.h

.image{
height: 15rem;
width: 10rem;
border-radius: 10px;
}

.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.home .box-container .box i{

height:6rem;
width:6rem;
line-height: 6rem;
text-align: center;
border-radius: 50%;
color:#fff;
background:var(--violet);
font-size: 3rem;
margin:2rem 0;
transition: .2s;
}

.home .box-container .box h3{

font-size: 2rem;
color:var(--pink);
 transition: .2s;
}

footer{
background-color: #43D684;
min-height: 15vh;
padding-top: 15px;
}

footer h3{
text-align: center;

.column {
float: left;
width: 25%;
padding: 10px;

.row::after {
content: "";
clear: both;
display: table;
align-content: center;
}

.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
 }

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

Appendix B: Screenshots
About us page:

Quiz page

Editors page:

Appendix C: Screenshots - Webpage Validation Evidence

Quiz page: 1 error

About us page: 1 error

Editors page: 0 errors

Appendix D: Individual Statement

Student Name: Ameet Bassan Student Id: W1827257

State what tasks you carried out in the project.

My designated tasks were to create a quiz for our website which was related to football.
I also had to create an information page in which our names and roles were listed along with
images of all team members.

State what you enjoyed and did not enjoy about teamwork.

I enjoyed discussing different topics such as how we were going to create our pages, the themes
and the content we would have. I did not enjoy the fact that changes were being made to the
navigation bar multiple times which meant we had to update it regularly.

State what you learnt about teamwork.

I learnt that in order to be a successful team it is important to discuss ideas and be open to other
peoples suggestions so that even one feels as though they have a fair say.

State what skills you gained/learnt from undertaking the project.

I learnt how to successfully create a user quiz and to create an information page in which details
can be displayed to the user.

State any strengths about yourself that emerged whilst undertaking the project.
I believe that I was motivating to my team as I pushed everyone to get on as well as being able to
display my ideas correctly.

State any weaknesses about yourself that emerged whilst undertaking the project.
I believe that I should have started my work a little early so that I could make our website look
better by adding more features such as a timer.
State how you would do things better if you were to undertake the project again.
I would have done more research and started earlier.

Additional general or project specific comments: