oysteikt/IT2
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Proeve 13.Februar

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2020-02-13 10:54:59 +01:00
parent a937b6c29c
commit 2ffffd937d
11 changed files with 2267 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
html/test_13.02.20/IT2, 2-timarsprøve_ Påskerenn 13 februar 2020.pdf Normal file
View File

Binary file not shown.

21
html/test_13.02.20/index.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<link rel="stylesheet" href="./resources/css/main.css">
<script src="./resources/js/tasksJSON.js"></script>
<script async src="./resources/js/linkConnector.js"></script>
</head>
<body>
<h1>Test</h1>
<div class="center">
<div class="textboxGrid"></div>
</div>
</body>
</html>

0
html/test_13.02.20/oppgaver/.keep Normal file
View File

1866
html/test_13.02.20/oppgaver/oppgave1/images/easter-154509.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 380 KiB

67
html/test_13.02.20/oppgaver/oppgave1/oppgave.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Oppgave 1</title>
<link rel="stylesheet" href="../../resources/css/main.css">
<script async src="./oppgave.js"></script>
</head>
<body>
<h1>Påskerennet 2020 - Olastøl, Hardanger</h1>
<div class="center"id="graphics">
<img src="images/easter-154509.svg"> <!-- Tatt fra https://pixabay.com/vectors/easter-spring-grass-lawn-154509/ -->
</div>
<div class="center" id="registration">
<h2>Legg til deltaker</h2>
<div class="inline">
<form id="addParticipantForm">
<label for="nameRegistration">Navn på deltaker:</label>
<input type="text" id="nameRegistration" placeholder="Ole" required>
<label for="ageRegistration">Alder:</label>
<input type="number" id="ageRegistration" min="0" max="130" placeholder="20" required>
<input type="submit" id="addParticipant" value="Legg til deltaker">
</form>
</div>
<div class="inline">
<form id="updateResultsForm">
<label for="nameSelector">Velg deltaker:</label>
<select id="nameSelector"></select>
<label for="activity1">Resultat 1:</label>
<input type="number" id="activity1" min="0" max="100">
<label for="activity2">Resultat 2:</label>
<input type="number" id="activity2" min="0" max="100">
<label for="activity3">Resultat3:</label>
<input type="number" id="activity3" min="0" max="100">
<input type="submit" id="updateResults" value="Oppdater resultater">
</form>
</div>
</div>
<div class="center">
<table id="participants">
<tr>
<th>Navn</th>
<th>Alder</th>
<th>Resultat 1</th>
<th>Resultat 2</th>
<th>Resultat 3</th>
<th>Resultatsum</th>
</tr>
</table>
</div>
<div class="center">
<button id="printResultsButton">Print resultater</button>
<table id="results"></table>
</div>
</body>
</html>

152
html/test_13.02.20/oppgaver/oppgave1/oppgave.js Normal file
View File

@@ -0,0 +1,152 @@
/* Hardcoded participant list */
let participants = [
{
name: "Harald",
age: "33",
results: [undefined, undefined, undefined],
resultSum: 0
}, {
name: "Borghild",
age: "25",
results: [undefined, undefined, undefined],
resultSum: 0
}, {
name: "Ola",
age: "12",
results: [undefined, undefined, undefined],
resultSum: 0
}, {
name: "Knut",
age: "62",
results: [undefined, undefined, undefined],
resultSum: 0
}, {
name: "Lise",
age: "46",
results: [undefined, undefined, undefined],
resultSum: 0
}
]
/* Add HTML DOM reference variables */
const graphicsBox = document.getElementById("graphics");
const addParticipantForm = document.getElementById("addParticipantForm");
const nameRegistrationInput = document.getElementById("nameRegistration");
const ageRegistrationInput = document.getElementById("ageRegistration");
const addParticipantButton = document.getElementById("addParticipant");
const updateResultsForm = document.getElementById("updateResultsForm");
const nameSelector = document.getElementById("nameSelector");
const activity1Input = document.getElementById("activity1");
const activity2Input = document.getElementById("activity2");
const activity3Input = document.getElementById("activity3");
const updateResultsButton = document.getElementById("updateResults");
const participantTable = document.getElementById("participants");
const participantTableHeaders = participantTable.innerHTML;
const printResultsButton = document.getElementById("printResultsButton");
const resultTable = document.getElementById("results");
/* Add event listeners */
addParticipantButton.addEventListener("click", addParticipant, false);
updateResultsButton.addEventListener("click", updateResults, false);
printResultsButton.addEventListener("click", printResults, false);
nameSelector.addEventListener("onchange", updateSelector, false);
/* Init HTML */
updateParticipants();
/* Oppdaterer HTML og selector med ny deltakerliste og score */
function updateParticipants() {
/* Reset inner HTML data */
participantTable.innerHTML = participantTableHeaders;
nameSelector.innerHTML = "";
for (participant in participants) {
/* Update HTML */
participantTable.innerHTML+=
`<tr>` +
`<td>${participants[participant].name}</td>` +
`<td>${participants[participant].age}</td>`;
for (result in participants[participant].results) {
if (participants[participant].results[result] != undefined) {
participantTable.innerHTML += `<td>${participants[participant].results[result]}</td>`;
}
}
participantTable.innerHTML += `</tr>`;
/* Update selector */
nameSelector.innerHTML += `<option value=${participant}>${participants[participant].name}</option>`
}
}
/* Legger til deltaker og kjører updateParticipants */
function addParticipant(evt) {
evt.preventDefault();
participants = [...participants, {
name: nameRegistrationInput.value,
age: ageRegistrationInput.value,
results: [undefined, undefined, undefined],
resultSum: 0
}]
updateParticipants();
}
/* Redigerer poenglisten og kjører updateParticipants */
function updateResults(evt) {
evt.preventDefault();
const participantNum = nameSelector.value;
participants[participantNum].results[0] = activity1Input.value;
participants[participantNum].results[1] = activity2Input.value;
participants[participantNum].results[2] = activity3Input.value;
updateParticipants();
}
/* Oppdaterer poengvelgerne etter valgt deltaker */
function updateSelector() {
const participant = participants[nameSelector.value];
if (participant.results[0] != undefined) {
activity1Input.value = participant.results[0];
}
if (participant.results[1] != undefined) {
activity2Input.value = participant.results[1];
}
if (participant.results[2] != undefined) {
activity3Input.value = participant.results[2];
}
}
/* Printer ut resultater */
function printResults() {
/* Remove participants without full score */
// const resultParticipants = participants.map(() =>)
/* Sort participants by result */
resultTable.innerHTML = "<tr>" +
"<th>Plassering</th>" +
"<th>Navn</th>" +
"<th>Aktivitet 1</th>" +
"<th>Aktivitet 2</th>" +
"<th>Aktivitet 3</th>" +
"<th>Total Poengsum</th>" +
"</tr>"
}

0
html/test_13.02.20/resources/css/.keep Normal file
View File

131
html/test_13.02.20/resources/css/main.css Normal file
View File

@@ -0,0 +1,131 @@
body {
background-color: #282828;
color: white;
margin: 0px;
padding: 0px;
margin-right: 2%;
margin-left: 8%;
margin-top: 5%;
font-family: museo-sans-rounded, sans-serif;
font-weight: 300;
font-style: normal;
}
button {
background-color: #787878;
padding: 15px;
display: inline-block;
border: 2px solid white;
border-radius: 15px;
color: white;
font-size: 16pt;
}
button:hover {
background-color: #505050;
}
button:focus {
outline: 0;
}
h1 {
color: #2883d0;
text-align: center;
background-color: #3c3c3c;
padding: 15px;
margin-left: 10%;
margin-right: 10%;
border-radius: 15px;
}
h2 {
color: #91e22c;
}
a {
color: #66D9EF;
}
a:hover {
color: #A6E22E;
}
input[type=color] {
width: 4em;
height: 2em;
background-color: #787878;
}
table {
width: 100%;
}
td, th {
border: 1px solid white;
padding: 8px;
}
th {
text-align: left;
background-color: #4CAF50;
}
tr:nth-child(even) {
background-color: #00000033;
}
tr:hover {
background-color: rgba(255, 255, 255, 0.281);
}
.center {
background-color: #505050;
margin: auto;
margin-bottom: 10%;
width: 70%;
padding: 5%;
height: max-content;
border-radius: 15px;
}
.center * {
margin: auto;
}
.inline {
margin: 15px;
}
.inline * {
display: inline-block;
}
.leftalign * {
margin: 15px;
text-align: left;
}
.textboxGrid {
display: grid;
justify-content: space-evenly;
align-content: space-evenly;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: auto;
grid-row-gap: 20px;
}
.textboxGrid * {
size: 100%;
padding: 40px 80px;
background-color: #787878;
}
.textboxGrid .linkElement {
border: 1px solid black;
}
.textboxGrid .linkElement:hover {
background-color: #505050;
cursor: pointer;
}
.textboxGrid .linkElement a:hover {
text-decoration: underline;
color: #66D9EF;
}
.textboxGrid .linkElement * {
margin: 0px;
padding: 0px;
background-color: transparent;
}

28
html/test_13.02.20/resources/js/linkConnector.js Normal file
View File

@@ -0,0 +1,28 @@
const taskArray = tasks.tasks;
const grid = document.getElementsByClassName("textboxGrid")[0];
for (i=0; i<taskArray.length; i++) {
const linkElement = document.createElement("div");
linkElement.className = "linkElement";
//TODO: taskArray needs to be preprocessed somehow
linkElement.addEventListener("click", function () {
window.location = taskArray[i]["path"];
} )
const h2 = document.createElement("h2");
const link = document.createElement("a");
link.href = taskArray[i]["path"];
link.innerHTML = taskArray[i]["name"];
h2.appendChild(link);
linkElement.appendChild(h2);
grid.appendChild(linkElement);
console.log(grid.querySelectorAll(".linkElement")[i]);
grid.querySelectorAll(".linkElement")[i].addEventListener("onclick", function () {
window.location = taskArray[i]["path"];
}, false);
}

1
html/test_13.02.20/resources/js/tasksJSON.js Normal file
View File

@@ -0,0 +1 @@
const tasks = {"tasks": [{"name": "Oppgave 1", "path": "./oppgaver/oppgave1/oppgave.html"}]}

2
test-template-generator/index.html
View File

@@ -11,7 +11,7 @@
</head>
<body>
<h1>Test</h1>
<h1>Test - 13. Februar 2020</h1>
<div class="center">
<div class="textboxGrid"></div>