Skip to content
Snippets Groups Projects
Commit 9b3e7378 authored by Tomislav Cosic's avatar Tomislav Cosic
Browse files

Initial commit

parents
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 703 additions and 0 deletions
.DS_Store 0 → 100644
+ 0
− 0
View file @ 9b3e7378
File added
README.md 0 → 100644
+ 14
− 0
View file @ 9b3e7378
# Test Web page
Simple test web page with accessibility errors used for the usability test.
Host the html in order to scan it for errors using a11y.css and its modified version.
indexTestA.html is another version for the within-subjects usability test, that has other errors.
How to host:
- Install http-server (https://www.npmjs.com/package/http-server) by running the command “npm install http-server -g” (installs it globally)
- Using command line, navigate to the folder containing the index.html
- run "http-server" in the command line
- If http-server was correctly installed, a command line output should appear.
- Use your browser to go to localhost:8080 or whatever port is shown in the command line output.
If you want to test the other version of the web page (indexTestA.html ) rename it to index.html.
Force refresh the page in case that no errors are shown (Windows: Ctrl + F5 / Mac: Cmd + Shift + R)
images/.DS_Store 0 → 100644
+ 0
− 0
View file @ 9b3e7378
File added
images/allosaurus.jpg 0 → 100644
+ 0
− 0
View file @ 9b3e7378
images/allosaurus.jpg

173 KiB

images/archaeopteryx.jpg 0 → 100644
+ 0
− 0
View file @ 9b3e7378
images/archaeopteryx.jpg

151 KiB

images/brachiosaurus.jpg 0 → 100644
+ 0
− 0
View file @ 9b3e7378
images/brachiosaurus.jpg

189 KiB

images/habitat.png 0 → 100644
+ 0
− 0
View file @ 9b3e7378
images/habitat.png

586 KiB

images/kentrosaurus.jpg 0 → 100644
+ 0
− 0
View file @ 9b3e7378
images/kentrosaurus.jpg

145 KiB

images/pterodactylus.jpg 0 → 100644
+ 0
− 0
View file @ 9b3e7378
images/pterodactylus.jpg

250 KiB

images/velociraptor.jpg 0 → 100644
+ 0
− 0
View file @ 9b3e7378
images/velociraptor.jpg

191 KiB

index.css 0 → 100644
+ 139
− 0
View file @ 9b3e7378
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
header {
justify-content: center;
padding: 20px;
background: #FFBF00;
margin: auto;
}
header > ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
justify-content: center;
}
li {
margin: 10px;
font-weight: 700;
font-size: larger;
}
li > a {
text-decoration: none;
color: black;
}
h1 {
text-align: center;
font-size: xx-large;
}
section {
max-width: 768px;
justify-content: center;
margin: auto;
}
p {
padding: 10px 10px 10px 10px;
}
.question {
margin: 20px 0 20px 0;
}
#main > div {
display: flex;
align-items: center;
padding: 20px 0;
}
#main > h2 {
text-align: center;
margin: auto;
padding: 25px 0;
}
#main .bonus-content {
display: block;
text-align: center;
}
#main .bonus-content > button {
padding: 25px;
margin: 10px 0;
}
#main .bonus-image {
display: none;
}
#main .bonus-image.open {
display: block;
}
#main .bonus-image > image {
margin: auto;
}
img {
width: 300px;
}
footer {
display: flex;
justify-content: space-between;
padding: 30px;
margin-top: 5rem;
background: #FFBF00;
}
.modal {
display: none;
position: fixed;
inset: 0;
z-index: 100;
padding: 2rem;
background-color: rgba(0,0,0,.5);
overflow: scroll;
}
.modal.open {
display: block;
}
.modal-background {
text-align: center;
background-color: #f7f7f7;
background-position: 0 0, .25rem .25rem;
background-size: .5rem .5rem;
color: #3e4b55;
font-size: 75%;
padding: 1rem;
}
#openModal {
padding: 20px 70px 20px 70px;
display: flex;
margin: auto;
justify-self: center;
}
.button-container {
display: flex;
justify-content: flex-end;
}
#closeModalButton {
margin-top: 10px;
padding: 10px;
}
\ No newline at end of file
index.html 0 → 100644
+ 275
− 0
View file @ 9b3e7378
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<header id="header">
<ul>
<li>
<a href="#main">Main</a>
</li>
<li>
<a href="#questionnaire">Questionnaire</a>
</li>
<li>
<a href="#results">Results</a>
</li>
</ul>
</header>
<section class="showcase-body" id="main">
<h1>The World of Dinosaurs Test B</h1>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Brachiosaurus</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
<img src="./images/brachiosaurus.jpg" alt="A brachiosaurus skeleton">
</div>
<h2>Kentrosaurus</h2>
<div>
<img src="./images/kentrosaurus.jpg" alt="A kentrosaurus skeleton">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Allosaurus</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
<img src="./images/allosaurus.jpg" alt="An allosaurus skeleton with a reconstructed head">
</div>
<h2>Pterodactylus</h2>
<div>
<img src="./images/pterodactylus.jpg" alt="The fossilized remains of a pterodactylus">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Archaeopteryx</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
<img src="./images/archaeopteryx.jpg">
</div>
<h2>Habitat</h2>
<div>
<img src="./images/habitat.png" alt="A display of several smaller animal remains like prehistoric fish">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Bonus Dinosaur</h2>
<div class="bonus-content">
<button id="revealBonus">Reveal bonus dinosaur</button>
<div class="bonus-image" id="bonusDino">
<h2>Velociraptor</h2>
<img src="./images/velociraptor.jpg"><br>
<a href="https://de.wikipedia.org/wiki/Velociraptor">Image from the Velociraptor Wikipedia page</a>
</div>
</div>
<script>
document.getElementById("revealBonus").addEventListener("click",()=>{
document.getElementById("bonusDino").classList.toggle("open");
})
</script>
</section>
<section class="questionnaire-body" id="questionnaire">
<h1>Questionnaire</h1>
<label for="selectDino">Select your favourite dinosaur: </label>
<select name="selectDino" id="selectDino">
<optgroup label="What's your favourite Dinosaur?">
<option>Brachiosaurus</option>
<option>Kentrosaurus</option>
<option>Allosaurus</option>
<option>Pterodactylus</option>
<option>Archaeopteryx</option>
<option>Velociraptor</option>
<option>I don't like dinosaurs</option>
</optgroup>
</select>
<fieldset class="question">
<legend>Question 1: </legend>
<div>
<input type="radio" id="answerOne" name="answers" value="one" checked>
<label for="answerOne">Answer 1</label>
</div>
<div>
<input type="radio" id="answerTwo" name="answers" value="two" >
<label for="answerTwo">Answer 2</label>
</div>
<div>
<input type="radio" id="answerThree" name="answers" value="three" >
<label for="answerThree">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 2: </legend>
<input type="checkbox" id="dinoOne" name="dinoOne" value="dinoOne">
<label for="dinoOne">Dinosaur 1</label>
<input type="checkbox" id="dinoTwo" name="dinoOne" value="dinoTwo">
<label for="dinoTwo">Dinosaur 2</label>
<input type="checkbox" id="dinoThree" value="dinoThree">
<label for="dinoThree">Dinosaur 3</label>
</fieldset>
<fieldset class="question">
<legend>Question 3: </legend>
<div>
<input type="radio" id="answer2One" name="answers2" value="one" checked>
<label for="answerOne">Answer 1</label>
</div>
<div>
<input type="radio" id="answer2Two" name="answers2" value="two" >
<label for="answerTwo">Answer 2</label>
</div>
<div>
<input type="radio" id="answer2Three" value="three" >
<label for="answerThree">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 4: </legend>
<div>
<input type="radio" id="answer3One" name="answers3" value="one" checked>
<label for="answerOne">Answer 1</label>
</div>
<div>
<input type="radio" id="answer3Two" name="answers3" value="two" >
<label for="answerTwo">Answer 2</label>
</div>
<div>
<input type="radio" id="answer3Three" name="answers3" value="three" >
<label for="answerThree">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 5: </legend>
<div>
<input type="radio" id="answer4One" name="answers4" value="one" checked>
<label for="answerOne">Answer 1</label>
</div>
<div>
<input type="radio" id="answer4Two" name="answers4" value="two" >
<label for="answerTwo">Answer 2</label>
</div>
<div>
<input type="radio" id="answer4Three" name="answers4" value="three" >
<label for="answerThree">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 6: </legend>
<input type="checkbox" id="dino2One" name="dinoTwo" value="dino2One">
<label for="dino2One">Dinosaur 1</label>
<input type="checkbox" id="dino2Two" name="dinoTwo" value="dino2Two">
<label for="dino2Two">Dinosaur 2</label>
<input type="checkbox" id="dino2Three" name="dinoTwo" value="dino2Three">
<label for="dino2Three">Dinosaur 3</label>
</fieldset>
<fieldset class="question">
<legend>Question 7: </legend>
<input type="checkbox" id="dino3One" name="dinoThree" value="dino3One">
<label for="dino3One">Dinosaur 1</label>
<input type="checkbox" id="dino3Two" name="dinoThree" value="dino3Two">
<label for="dino3Two">Dinosaur 2</label>
<input type="checkbox" id="dino3Three" name="dinoThree" value="dino3Three">
<label for="">Dinosaur 3</label>
</fieldset>
<form action="index.html">
<h2>Personal Information </h2>
<label for="firstName">First name</label> <br>
<input type="text" id="firstName" name="firstName" tabindex="1"> <br>
<label for="lastName">Last name</label> <br>
<input type="text" id="lastName" name="lastName" tabindex="2"> <br>
<label for="">Address</label> <br>
<input type="text" id="address" name="address"> <br>
<input type="submit" value="submit">
</form>
</section>
<section id="results">
<h1>Results</h1>
<p>
The following results are placeholder only, they are not calculated based on your answers
so feel free to answer whatever you want or nothing at all. <b>
Don't forget to click the button below to see the
result screen.
</b>
</p>
<button id="openModal" type="button">Open Result Screen</button>
<div class="modal" id="modal">
<div class="modal-background">
<h2>You got 100/100 points (you will always get 100 points)</h2>
</div>
<div class="button-container">
<button id="closeModalButton">Close</button>
</div>
</div>
<script>
document.getElementById("openModal").addEventListener("click",()=>{
document.getElementById("modal").classList.add("open");
})
document.getElementById("closeModalButton").addEventListener("click",()=>{
document.getElementById("modal").classList.remove("open")
})
</script>
</section>
<footer>
<p><a href="#header">Back to the top</a></p>
<p>Content and images taken from: <a href="https://www.museumfuernaturkunde.berlin/en/museum/exhibitions/world-dinosaurs"
>Museum für Naturkunde Berlin</a></p>
</footer>
</body>
</html>
\ No newline at end of file
indexTestA.html 0 → 100644
+ 275
− 0
View file @ 9b3e7378
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<header id="header">
<ul>
<li>
<a href="#main">Main</a>
</li>
<li>
<a href="#questionnaire">Questionnaire</a>
</li>
<li>
<a href="#results">Results</a>
</li>
</ul>
</header>
<section class="showcase-body" id="main">
<h1>The World of Dinosaurs Test A</h1>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Brachiosaurus</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
<img src="./images/brachiosaurus.jpg">
</div>
<h2>Kentrosaurus</h2>
<div>
<img src="./images/kentrosaurus.jpg" alt="A kentrosaurus skeleton">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Allosaurus</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
<img src="./images/allosaurus.jpg" alt="An allosaurus skeleton with a reconstructed head">
</div>
<h2>Pterodactylus</h2>
<div>
<img src="./images/pterodactylus.jpg" alt="The fossilized remains of a pterodactylus">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Archaeopteryx</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
<img src="./images/archaeopteryx.jpg" alt="The fossilized remains of an archaeopteryx">
</div>
<h2>Habitat</h2>
<div>
<img src="./images/habitat.png" alt="A display of several smaller animal remains like prehistoric fish">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni natus officia error,
totam sint quo illum? Asperiores dolor quae voluptatem deserunt ducimus architecto rem,
eum doloremque placeat, officiis itaque ipsam.
</p>
</div>
<h2>Bonus Dinosaur</h2>
<div class="bonus-content">
<button type="button" id="revealBonus">Reveal bonus dinosaur</button>
<div class="bonus-image" id="bonusDino">
<h2>Velociraptor</h2>
<img src="./images/velociraptor.jpg" alt="Velociraptor skeleton reconstruction"><br>
<a href="https://de.wikipedia.org/wiki/Velociraptor">Image from the Velociraptor Wikipedia page</a>
</div>
</div>
<script>
document.getElementById("revealBonus").addEventListener("click",()=>{
document.getElementById("bonusDino").classList.toggle("open");
})
</script>
</section>
<section class="questionnaire-body" id="questionnaire">
<h1>Questionnaire</h1>
<label for="">Select your favourite dinosaur: </label>
<select name="selectDino" id="selectDino">
<optgroup label="What's your favourite Dinosaur?">
<option>Brachiosaurus</option>
<option>Kentrosaurus</option>
<option>Allosaurus</option>
<option>Pterodactylus</option>
<option>Archaeopteryx</option>
<option>Velociraptor</option>
<option>I don't like dinosaurs</option>
</optgroup>
</select>
<fieldset class="question">
<legend>Question 1: </legend>
<div>
<input type="radio" id="answerOne" value="one" checked>
<label for="answerOne">Answer 1</label>
</div>
<div>
<input type="radio" id="answerTwo" name="answers" value="two" >
<label for="answerTwo">Answer 2</label>
</div>
<div>
<input type="radio" id="answerThree" value="three" >
<label for="answerThree">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 2: </legend>
<input type="checkbox" id="dinoOne" name="dinoOne" value="dinoOne">
<label for="dinoOne">Dinosaur 1</label>
<input type="checkbox" id="dinoTwo" name="dinoOne" value="dinoTwo">
<label for="dinoTwo">Dinosaur 2</label>
<input type="checkbox" id="dinoThree" name="dinoOne" value="dinoThree">
<label for="dinoThree">Dinosaur 3</label>
</fieldset>
<fieldset class="question">
<legend>Question 3: </legend>
<div>
<input type="radio" id="answer2One" name="answers2" value="one" checked>
<label for="answerOne">Answer 1</label>
</div>
<div>
<input type="radio" id="answer2Two" name="answers2" value="two" >
<label for="answerTwo">Answer 2</label>
</div>
<div>
<input type="radio" id="answer2Three" name="answers2" value="three" >
<label for="answerThree">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 4: </legend>
<div>
<input type="radio" id="answer3One" name="answers3" value="one" checked>
<label for="answerOne">Answer 1</label>
</div>
<div>
<input type="radio" id="answer3Two" name="answers3" value="two" >
<label for="answerTwo">Answer 2</label>
</div>
<div>
<input type="radio" id="answer3Three" name="answers3" value="three" >
<label for="answerThree">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 5: </legend>
<div>
<input type="radio" id="answer4One" name="answers4" value="one" checked>
<label for="answerOne" tabindex="1">Answer 1</label>
</div>
<div>
<input type="radio" id="answer4Two" name="answers4" value="two" >
<label for="answerTwo" tabindex="2">Answer 2</label>
</div>
<div>
<input type="radio" id="answer4Three" name="answers4" value="three" >
<label for="answerThree" tabindex="3">Answer 3</label>
</div>
</fieldset>
<fieldset class="question">
<legend>Question 6: </legend>
<input type="checkbox" id="dino2One" name="dinoTwo" value="dino2One">
<label for="dino2One">Dinosaur 1</label>
<input type="checkbox" id="dino2Two" name="dinoTwo" value="dino2Two">
<label for="dino2Two">Dinosaur 2</label>
<input type="checkbox" id="dino2Three" name="dinoTwo" value="dino2Three">
<label for="dino2Three">Dinosaur 3</label>
</fieldset>
<fieldset class="question">
<legend>Question 7: </legend>
<input type="checkbox" id="dino3One" name="dinoThree" value="dino3One">
<label for="dino3One">Dinosaur 1</label>
<input type="checkbox" id="dino3Two" name="dinoThree" value="dino3Two">
<label for="dino3Two">Dinosaur 2</label>
<input type="checkbox" id="dino3Three" name="dinoThree" value="dino3Three">
<label for="dino3Three">Dinosaur 3</label>
</fieldset>
<form action="index.html">
<h2>Personal Information </h2>
<label for="firstName">First name</label> <br>
<input type="text" id="firstName" name="firstName"> <br>
<label for="lastName">Last name</label> <br>
<input type="text" id="lastName" name="lastName"> <br>
<label for="adress">Address</label> <br>
<input type="text" id="address" name="address"> <br>
<input type="submit" value="submit">
</form>
</section>
<section id="results">
<h1>Results</h1>
<p>
The following results are placeholder only, they are not calculated based on your answers
so feel free to answer whatever you want or nothing at all. <b>
Don't forget to click the button below to see the
result screen.
</b>
</p>
<button id="openModal">Open Result Screen</button>
<div class="modal" id="modal">
<div class="modal-background">
<h2>You got 100/100 points (you will always get 100 points)</h2>
</div>
<div class="button-container">
<button id="closeModalButton">Close</button>
</div>
</div>
<script>
document.getElementById("openModal").addEventListener("click",()=>{
document.getElementById("modal").classList.add("open");
})
document.getElementById("closeModalButton").addEventListener("click",()=>{
document.getElementById("modal").classList.remove("open")
})
</script>
</section>
<footer>
<p><a href="#header">Back to the top</a></p>
<p>Content and images taken from: <a href="https://www.museumfuernaturkunde.berlin/en/museum/exhibitions/world-dinosaurs"
>Museum für Naturkunde Berlin</a></p>
</footer>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment