Opgavebank

Depot administration m. RPi

Problem: Både elever og lærere tager en masse ting ud af depot til diverse projekter, uden nogen reel form for oversyn med hvem der har hvilke ting.

Løsning: Opstil en Raspberry Pi på depotet med en touchskærm, som kører et program der (ved hjælp af en database) holder styr på hvilke ting der er i depotet, og hvilke ting der bliver brugt af hvilke elever til deres projekter. RPi’en opstilles i depottet hvor den er synlig og let tilgængelig, måske ved at bygge en LEGO bracket til at holde den.

Programmet sættes op så hvem som helst kan tage et objekt fra depotet, og derefter taste sig selv ud på systemet, ved at skrive hvad de har lånt og hvad deres navn er. Evt. kan dette udvides med at man også kan indtaste formålet ved at låne objektet. Programmet skal kunne vise hvem der har lånt hvad, og evt. hvornår og hvorfor. Når udlånte objekter afleveres igen skal de markeres som “afleveret” i systemet.

Programmet kan laves med C#, Python eller som en lokal hjemmeside. Programmet skal være brugervenligt og intuitivt.

Til at starte med kan programmet nøjes med at holde styr på de vigtigste ting, som PC’er, RPi’er og routere. og kan senere udvides med flere objekter.

Ideer til videre udvikling:

Databasen kan gøres synlig på det lokale netværk, så inventar og udlån kan ses uden at tilgå den fysiske maskine på depotet. Dette kunne gøres ved at oprette en hjemmeside på det lokale netværk.

RPi’en kan sende en “vred” email til personer der ikke har afleveret et udlånt objekt efter en måned.

Streamline udlån- og afleveringsprocessen ved hjælp af streg- eller QR-kode.

Kontakt KRPO for mere information

Hvilke er under 10? 🕙

Skriv JavaScript-kode, der tilføjer class’en “underTi” til de <td>-elementer, hvis tal er under 10.

Lav en variabel med alle <td>-elementer: querySelectorAll
Led i dem efter tal under 10: .forEach() + if (tal < 10)
Tilføj class’en: if (…) + classList.add(“underTi”)

<!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>Document</title>
</head>
<body>
    <style>
        .underTi {
            color: red;
        }
    </style>
    <h1>Antal fisk fanget 🐟</h1>
    <table width="500" border="1">
        <tr>
            <th>Asger</th>
            <th>John</th>
            <th>Tine</th>
            <th>Louise</th>
            <th>Bettina</th>
        </tr>
        <tr>
            <td>3</td>
            <td>14</td>
            <td>0</td>
            <td>23</td>
            <td>5</td>
        </tr>
        <tr>
            <td>7</td>
            <td>13</td>
            <td>15</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>7</td>
            <td>10</td>
            <td>23</td>
            <td>4</td>
        </tr>
        <tr>
            <td>17</td>
            <td>2</td>
            <td>6</td>
            <td>5</td>
            <td>0</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>4</td>
            <td>7</td>
            <td>10</td>
        </tr>
    </table>
    <script>
        
    </script>
</body>
</html>

Hvorfor altid lommeregnere? 🧮

Opgave 1: Få følgende kode til at give resultatet for a + b

Opgave 2: Udvid HTML og JS med disse regnefunktioner: Minus, Gange, Divider

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lommeregner</title>
</head>
<body>
    <div>
        <input type="number" class="a">
    </div>
    <div>
        <input type="number" class="b">
    </div>
    <div>
        <button class="plus">+</button>
    </div>
    <div class="result">

    </div>
</body>
<script>
    let a = document.querySelector(".a").value;
    let b = document.querySelector(".b").value;
    let plus = document.querySelector(".plus");
    let result = document.querySelector(".result");

    plus.addEventListener("click", function() {
        // vis resultatet af a + b i div'en "result"
    });
</script>
</html>

X er fejl ❌

I følgende kode, tjek om <li>-elementerne indeholder “X”. Hvis de gør, så tilføj class’en “fejl”.

Lav en variabel med alle <li>-elementer: querySelectorAll
Led i dem efter en specifik karakter: .forEach() + .find()
Tilføj class’en: if (…) + classList.add(“fejl”)

<!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>Document</title>
</head>
<body>
    <style>
        .fejl {
            color: red;
        }
    </style>
    <ul>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✗ fejl</li>
        <li>✔</li>
    </ul>
    <script>

    </script>
</body>
</html>

Mit navn er Efternavn. Fornavn Efternavn. 🔫🤵

Når man klikker på knappen, skal fornavn og efternavn i de to input-felter vises i div’en “result” på denne måde:
My name is last. first last.

Strengen skal skrives med en template literal.

<!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>Document</title>
</head>
<body>
    <div>What is your name?</div>
    <input type="text" class="first">
    <input type="text" class="last">
    <input type="submit" value="✔">
    <div class="result"></div>
    <script>

    </script>
</body>

</html>

Emoji-viseren 🍔🍟🌭🍿🍕🥞🥐🥪

Opgave 1: Knappen “Show emoji from number in array” skal vise den emoji der er for valgte array-position i div’en “result”

Opgave 2: Knappern “Show random emoji” skal vise en tilfældig emoji i div’en “result”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food emoji</title>
</head>
<body>
    <input type="number" min="0" max="7">
    <button type="submit" class="show-emoji">Show emoji from number in array</button>
    <button type="submit" class="show-random-emoji">Show random emoji</button>
    <div class="result"></div>
    <script>
        const emojiArray = ["🍔","🍟","🌭","🍿","🍕","🥞","🥐","🥪"]
        // show-emoji click: In div.result --> Show the emoji from written array place [0] to [7]
        // show-random-emoji click: In div.result --> Show a random emoji from [0] to [7]
    </script>
</body>

Slet-sig-selv-knapper 💀

Denne kode laver en hjemmeside, hvori der er en kasse med en knap der laver flere kasser.

Få X-knappen til at slette den kasse hvorfra den trykkes.

<!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>Document</title>
</head>

<body>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            max-width: 600px;
            margin: 0 auto;
        }

        .item {
            margin: 10px;
            border: 1px solid silver;
            border-radius: 2px;
            padding: 10px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
    <div class="container">
        <div class="item">test <button onclick="remove()">X</button> <button onclick="add()">+</button></div>
    </div>
</body>
<script>
    let container = document.querySelector(".container");
    let item = document.querySelector(".item");
    let i = 0;

    function add() {
        i++;
        container.innerHTML +=
            `<div class="item">test ${i} <button onclick="remove()">X</button> <button onclick="add()">+</button></div>`;
    }

    function remove() {
        console.log("remove");
    }
</script>

</html>