Skip to content

H
HCI-JJ-News
Commit d895ff2f authored by Jonathan Poalses's avatar Jonathan Poalses
Browse files
Options

Added landing page and updated file names

parent 4b63095b
Hide whitespace changes
Inline Side-by-side
Showing with 307 additions and 149 deletions
Clean Design Site/assets/js/custom.js 0 → 100644
View file @ d895ff2f
function enableBegin() {
var begin = document.getElementById("begin");
if (begin.disabled == true) {
begin.disabled = false;
begin.classList.remove('disabled');
} else {
begin.disabled = true;
begin.classList.add("disabled");
}
}
function ferry() {
let randomNumber = Math.random() * 100;
if (randomNumber > 50) {
window.location.replace("clean.html");
} else {
window.location.replace("cluttered.html");
}
}
\ No newline at end of file
Clean Design Site/clean.html 0 → 100644
View file @ d895ff2f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Clean - Trustworthy Times</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navbar-shrink py-3" id="mainNav">
<div class="container-fluid"><a class="navbar-brand d-flex align-items-center" href="/"><span>Trustworthy Times</span></a></div>
</nav>
<header class="pt-5">
<div class="container pt-4 pt-xl-5">
<div class="row pt-5">
<div class="col-md-8 text-center text-md-start mx-auto">
<div class="text-center">
<h1 class="display-4 fw-bold mb-5">News from sources you can&nbsp;<span class="underline">trust</span>.</h1>
</div>
</div>
</div>
</div>
</header>
<form>
<section>
<div class="container py-4 py-xl-5">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI-Toad.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">National Park Service Asks Visitors to Please Stop Licking Toads</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1" value="real" name="story3" required=""><label class="form-check-label" for="formCheck-1">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-2" value="fake" name="story3" required=""><label class="form-check-label" for="formCheck-2">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Disney.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Disney Wins Emmy For Best Profits</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-23" name="story10" value="real" required=""><label class="form-check-label" for="formCheck-23">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-24" name="story10" value="fake" required=""><label class="form-check-label" for="formCheck-24">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block" src="assets/img/HCI%20Beer.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Beer Lubricated the Rise of Civilization, Study Suggests</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-3" name="story1" value="real" required=""><label class="form-check-label" for="formCheck-3">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-4" name="story1" value="fake" required=""><label class="form-check-label" for="formCheck-4">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Elon.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Most Brilliant Ways Elon Musk Plans To Make Twitter Profitable</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-21" name="story7" value="real" required=""><label class="form-check-label" for="formCheck-21">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-22" name="story7" value="fake" required=""><label class="form-check-label" for="formCheck-22">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Spinach.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Scientists have taught spinach to send emails and it could warn us about climate change<br></h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-15" name="story4" value="real" required=""><label class="form-check-label" for="formCheck-15">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-16" name="story4" value="fake" required=""><label class="form-check-label" for="formCheck-16">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Obama.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Obama Claims He’s Still President After Seeing How Susceptible Voters Are To Conspiracy Theories</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-19" name="story11" value="real" required=""><label class="form-check-label" for="formCheck-19">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-20" name="story11" value="fake" required=""><label class="form-check-label" for="formCheck-20">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI-Autocomplete.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Nonsense paper written by iOS autocomplete accepted for conference</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-5" name="story2" value="real" required=""><label class="form-check-label" for="formCheck-5">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-6" name="story2" value="fake" required=""><label class="form-check-label" for="formCheck-6">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Oxfordshire.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Oxfordshire County Council's vegan lunches to continue after motion fails</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-17" name="story5" value="real" required=""><label class="form-check-label" for="formCheck-17">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-18" name="story5" value="fake" required=""><label class="form-check-label" for="formCheck-18">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Usain%20Bolt.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Usain Bolt Recalls Discovering Talent For Running Through Corporate Wellness Challenge</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-11" name="story8" value="real" required=""><label class="form-check-label" for="formCheck-11">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-12" name="story8" value="fake" required=""><label class="form-check-label" for="formCheck-12">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Tesla.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Tesla recalls 40,000 cars over power-steering fault</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-13" name="story6" value="real" required=""><label class="form-check-label" for="formCheck-13">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-14" name="story6" value="fake" required=""><label class="form-check-label" for="formCheck-14">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Work%20Emails.jpg">
<div class="card-body">
<div>
<h5 class="fw-bold">No after work e-mails please. French ordered to ignore the boss after 6pm</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-9" name="story9" value="real" required=""><label class="form-check-label" for="formCheck-9">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-10" name="story9" value="fake" required=""><label class="form-check-label" for="formCheck-10">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20World%20Hunger.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">World Hunger Activists Throw Oil On Pelican To Protest Climate Activists Wasting Soup</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-7" name="story12" value="real" required=""><label class="form-check-label" for="formCheck-7">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-8" name="story12" value="fake" required=""><label class="form-check-label" for="formCheck-8">Fake</label></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-bg-dark py-4 py-xl-5">
<div class="container text-center"><button class="btn btn-light btn-lg border rounded-pill" type="submit">Submit</button></div>
</section>
</form>
<footer>
<div class="container py-4 py-lg-5">
<div class="row row-cols-1 row-cols-md-4 justify-content-center">
<div class="col-md-3">
<div class="fw-bold d-flex align-items-center mb-2"><span>Trustworthy Times</span></div>
<p class="text-muted">All trustworthy, all the time.</p>
</div>
</div>
<hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2022 Trustworthy Times</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-facebook">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg></li>
<li class="list-inline-item"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-twitter">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg></li>
<li class="list-inline-item"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-instagram">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
</svg></li>
</ul>
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/startup-modern.js"></script>
</body>
</html>
\ No newline at end of file
Clean Design Site/cluttered.html 0 → 100644
View file @ d895ff2f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Cluttered - Trustworthy Times</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navbar-shrink py-3" id="mainNav">
<div class="container-fluid"><a class="navbar-brand d-flex align-items-center" href="/"><span>Trustworthy Times</span></a></div>
</nav>
<section class="py-5 mt-5">
<div class="container">
<div class="row row-cols-1 d-flex justify-content-center align-items-center">
<div class="col-md-10 text-center"><img class="img-fluid w-100" src="assets/img/illustrations/404.svg"></div>
<div class="col text-center">
<h2 class="display-3 fw-bold mb-4">Page Not Found</h2>
<p class="fs-4 text-muted">Fusce adipiscing sit, torquent porta pulvinar.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container py-4 py-lg-5">
<div class="row row-cols-1 row-cols-md-4 justify-content-center">
<div class="col-md-3">
<div class="fw-bold d-flex align-items-center mb-2"><span>Trustworthy Times</span></div>
<p class="text-muted">All trustworthy, all the time.</p>
</div>
</div>
<hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © 2022 Trustworthy Times</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-facebook">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path>
</svg></li>
<li class="list-inline-item"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-twitter">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path>
</svg></li>
<li class="list-inline-item"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-instagram">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"></path>
</svg></li>
</ul>
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/startup-modern.js"></script>
</body>
</html>
\ No newline at end of file
Clean Design Site/index.html
View file @ d895ff2f
......@@ -13,160 +13,36 @@
<nav class="navbar navbar-light navbar-expand-md navbar-shrink py-3" id="mainNav">
<div class="container-fluid"><a class="navbar-brand d-flex align-items-center" href="/"><span>Trustworthy Times</span></a></div>
</nav>
<header class="pt-5">
<div class="container pt-4 pt-xl-5">
<div class="row pt-5">
<div class="col-md-8 text-center text-md-start mx-auto">
<div class="text-center">
<h1 class="display-4 fw-bold mb-5">News from sources you can&nbsp;<span class="underline">trust</span>.</h1>
</div>
<section class="py-5 my-5">
<div class="container py-5">
<div class="row mb-2">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<h2 class="display-6 fw-bold mb-5"><span class="pb-3 underline">Welcome to our study!<br></span></h2>
<p class="text-muted mb-5">This is a study to see what effect the UI style of a news website has on the readers ability to tell if a story is real or fake.</p>
<p class="text-muted mb-5">There are two possible styles, to keep things simple. One is a cluttered UI, and the other is a clean UI.</p>
<p class="text-muted mb-5">&nbsp;When you press the button below, you will be randomly taken to one of these two pages, where you will see the headline and picture for 12 stories, where you select if you think each is real or fake, then you press submit at the bottom.</p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-8 text-center mx-auto">
<div class="form-check"><input class="form-check-input float-none" type="checkbox" id="formCheck" style="margin: 4.8px 10px 4px -24px;" name="Terms" value="Accept" onclick="enableBegin()"><label class="form-check-label" for="formCheck-1">Do you accept the <a href="#" data-bs-target="#modal-1" data-bs-toggle="modal" style="color: var(--bs-info);"><span>terms and conditions</span></a>?</label></div><button class="btn btn-primary disabled text-center border rounded-pill" id="begin" type="button" style="margin: 12px;width: 123.3594px;height: 57.5938px;font-size: 22px;" disabled="" onclick="ferry()">Begin</button>
</div>
</div>
</div>
</header>
<form>
<section>
<div class="container py-4 py-xl-5">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI-Toad.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">National Park Service Asks Visitors to Please Stop Licking Toads</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1" value="real" name="story3" required=""><label class="form-check-label" for="formCheck-1">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-2" value="fake" name="story3" required=""><label class="form-check-label" for="formCheck-2">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Disney.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Disney Wins Emmy For Best Profits</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-23" name="story10" value="real" required=""><label class="form-check-label" for="formCheck-23">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-24" name="story10" value="fake" required=""><label class="form-check-label" for="formCheck-24">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block" src="assets/img/HCI%20Beer.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Beer Lubricated the Rise of Civilization, Study Suggests</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-3" name="story1" value="real" required=""><label class="form-check-label" for="formCheck-3">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-4" name="story1" value="fake" required=""><label class="form-check-label" for="formCheck-4">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Elon.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Most Brilliant Ways Elon Musk Plans To Make Twitter Profitable</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-21" name="story7" value="real" required=""><label class="form-check-label" for="formCheck-21">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-22" name="story7" value="fake" required=""><label class="form-check-label" for="formCheck-22">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Spinach.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Scientists have taught spinach to send emails and it could warn us about climate change<br></h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-15" name="story4" value="real" required=""><label class="form-check-label" for="formCheck-15">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-16" name="story4" value="fake" required=""><label class="form-check-label" for="formCheck-16">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Obama.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Obama Claims He’s Still President After Seeing How Susceptible Voters Are To Conspiracy Theories</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-19" name="story11" value="real" required=""><label class="form-check-label" for="formCheck-19">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-20" name="story11" value="fake" required=""><label class="form-check-label" for="formCheck-20">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI-Autocomplete.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Nonsense paper written by iOS autocomplete accepted for conference</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-5" name="story2" value="real" required=""><label class="form-check-label" for="formCheck-5">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-6" name="story2" value="fake" required=""><label class="form-check-label" for="formCheck-6">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Oxfordshire.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Oxfordshire County Council's vegan lunches to continue after motion fails</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-17" name="story5" value="real" required=""><label class="form-check-label" for="formCheck-17">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-18" name="story5" value="fake" required=""><label class="form-check-label" for="formCheck-18">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Usain%20Bolt.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Usain Bolt Recalls Discovering Talent For Running Through Corporate Wellness Challenge</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-11" name="story8" value="real" required=""><label class="form-check-label" for="formCheck-11">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-12" name="story8" value="fake" required=""><label class="form-check-label" for="formCheck-12">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Tesla.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">Tesla recalls 40,000 cars over power-steering fault</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-13" name="story6" value="real" required=""><label class="form-check-label" for="formCheck-13">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-14" name="story6" value="fake" required=""><label class="form-check-label" for="formCheck-14">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20Work%20Emails.jpg">
<div class="card-body">
<div>
<h5 class="fw-bold">No after work e-mails please. French ordered to ignore the boss after 6pm</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-9" name="story9" value="real" required=""><label class="form-check-label" for="formCheck-9">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-10" name="story9" value="fake" required=""><label class="form-check-label" for="formCheck-10">Fake</label></div>
</div>
</div>
</div>
<div class="col">
<div class="card border-light border-1 d-flex justify-content-center p-4"><img class="card-img-top w-100 d-block border rounded-pill" src="assets/img/HCI%20World%20Hunger.webp">
<div class="card-body">
<div>
<h5 class="fw-bold">World Hunger Activists Throw Oil On Pelican To Protest Climate Activists Wasting Soup</h5>
</div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-7" name="story12" value="real" required=""><label class="form-check-label" for="formCheck-7">Real</label></div>
<div class="form-check"><input class="form-check-input" type="radio" id="formCheck-8" name="story12" value="fake" required=""><label class="form-check-label" for="formCheck-8">Fake</label></div>
</div>
</div>
</div>
</section>
<div class="modal fade" role="dialog" tabindex="-1" id="modal-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Terms and conditions.</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>We will not use any IP information.<br><br>We will not use any cookies.<br><br>We will not use any personal information such as names.<br><br>We will not use any location information.<br><br>We will only use the results from the forms on the page, stored securely in a database where only an automatically generated ID and boolean to determine which UI was used will be linked to your given results.<br><br>There will be no way that any input given by you will be saved or recorded by us, aside from the results of the study.<br><br>We only ask that you give your answers honestly, and only partake in the study once</p>
</div>
<div class="modal-footer"><button class="btn btn-primary" type="button" data-bs-target="#modal-1" data-bs-toggle="modal">Ok</button></div>
</div>
</section>
<section class="text-bg-dark py-4 py-xl-5">
<div class="container text-center"><button class="btn btn-light btn-lg border rounded-pill" type="submit">Submit</button></div>
</section>
</form>
</div>
</div>
<footer>
<div class="container py-4 py-lg-5">
<div class="row row-cols-1 row-cols-md-4 justify-content-center">
......@@ -193,6 +69,7 @@
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/startup-modern.js"></script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment