Added test V2
This commit is contained in:
Binary file not shown.
21
html/test_13.02.20/test_13.02.20_V2/index.html
Normal file
21
html/test_13.02.20/test_13.02.20_V2/index.html
Normal 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/test_13.02.20_V2/oppgaver/.keep
Normal file
0
html/test_13.02.20/test_13.02.20_V2/oppgaver/.keep
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 380 KiB |
@@ -0,0 +1,68 @@
|
|||||||
|
<!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>
|
||||||
|
<br><br><br>
|
||||||
|
<table id="results"></table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
167
html/test_13.02.20/test_13.02.20_V2/oppgaver/oppgave1/oppgave.js
Normal file
167
html/test_13.02.20/test_13.02.20_V2/oppgaver/oppgave1/oppgave.js
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
|
||||||
|
/* 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 */
|
||||||
|
addParticipantForm.addEventListener("submit", addParticipant, false);
|
||||||
|
updateResultsForm.addEventListener("submit", updateResults, false);
|
||||||
|
printResultsButton.addEventListener("click", printResults, false);
|
||||||
|
nameSelector.addEventListener("change", 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 table from participant array */
|
||||||
|
let newTable =
|
||||||
|
`<tr>` +
|
||||||
|
`<td>${participants[participant].name}</td>` +
|
||||||
|
`<td>${participants[participant].age}</td>`;
|
||||||
|
|
||||||
|
for (result in participants[participant].results) {
|
||||||
|
if (participants[participant].results[result] != undefined) {
|
||||||
|
newTable += `<td>${participants[participant].results[result]}</td>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add sum to object and add to table if all 3 results exist */
|
||||||
|
if (!participants[participant].results.includes(undefined)) {
|
||||||
|
participants[participant].sum = participants[participant].results.reduce((a, b) => parseInt(a) + parseInt(b), 0);
|
||||||
|
newTable += `<td>${participants[participant].sum}</td>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
newTable += `</tr>`;
|
||||||
|
participantTable.innerHTML += newTable;
|
||||||
|
|
||||||
|
/* Update selector */
|
||||||
|
nameSelector.innerHTML += `<option value=${participant}>${participants[participant].name}</option>`
|
||||||
|
|
||||||
|
}
|
||||||
|
updateSelector();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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 til den gjeldende deltakeren 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];
|
||||||
|
activity1Input.value = (participant.results[0] == undefined) ? "" : participant.results[0]; //Cant set number to undefined -> Set ""
|
||||||
|
activity2Input.value = (participant.results[1] == undefined) ? "" : participant.results[1];
|
||||||
|
activity3Input.value = (participant.results[2] == undefined) ? "" : participant.results[2];
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Printer ut resultater */
|
||||||
|
function printResults() {
|
||||||
|
|
||||||
|
/* Remove participants without full score */
|
||||||
|
let resultParticipants = participants.filter((participant) => participant.sum > 0);
|
||||||
|
|
||||||
|
/* Sort participants by result */
|
||||||
|
resultParticipants.sort((a, b) => b.sum-a.sum);
|
||||||
|
|
||||||
|
/* Add to HTML result table*/
|
||||||
|
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>"
|
||||||
|
|
||||||
|
for (participant in resultParticipants) {
|
||||||
|
resultTable.innerHTML += `<tr>` +
|
||||||
|
`<td>${parseInt(participant) + 1}</td>` +
|
||||||
|
`<td>${resultParticipants[participant].name}</td>` +
|
||||||
|
`<td>${resultParticipants[participant].results[0]}</td>` +
|
||||||
|
`<td>${resultParticipants[participant].results[1]}</td>` +
|
||||||
|
`<td>${resultParticipants[participant].results[2]}</td>` +
|
||||||
|
`<td>${resultParticipants[participant].sum}</td>` +
|
||||||
|
`</tr>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
131
html/test_13.02.20/test_13.02.20_V2/resources/css/main.css
Normal file
131
html/test_13.02.20/test_13.02.20_V2/resources/css/main.css
Normal 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;
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
const tasks = {"tasks": [{"name": "Oppgave 1", "path": "./oppgaver/oppgave1/oppgave.html"}]}
|
||||||
Reference in New Issue
Block a user