3. Vorbereitung auf die Abschlussprüfung

Aufgabenstellung

40 Multiple Choice Fragen

HTML

Welches Attribut wird verwendet, um einzelne Elemente im HTML-Dokument zu gruppieren?
a) <group>
b) <div>
c) <container>
d) <section>

Wie bettet man ein Video in eine HTML-Seite ein?
a) <media>
b) <video>
c) <embed>
d) <movie>

Welches HTML-Attribut gibt die URL einer verlinkten Ressource an?
a) src
b) link
c) href
d) url

Welches HTML-Element wird verwendet, um Text in einem vorformatierten Textblock anzuzeigen?
a) <div>
b) <pre>
c) <code>
d) <text>

Welches HTML-Attribut gibt an, dass ein Formularfeld deaktiviert ist?
a) readonly
b) disabled
c) inactive
d) closed

Welches HTML-Element wird verwendet, um eine Dropdown-Liste zu erstellen?
a) <select>
b) <option>
c) <dropdown>
d) <list>

Welches HTML-Tag wird verwendet, um Inline-Stile anzuwenden?
a) <css>
b) <style>
c) <link>
d) <span>

Was ist der Standardwert des display-Attributs für ein div-Element?
a) inline
b) block
c) inline-block
d) flex

Welches HTML-Tag wird verwendet, um eine horizontale Linie einzufügen?
a) <line>
b) <break>
c) <hr>
d) <sep>

Welches Attribut wird verwendet, um den MIME-Typ einer eingebetteten Ressource anzugeben?
a) context
b) format
c) mime
d) type

CSS

Welches CSS-Attribut wird verwendet, um die Hintergrundbildwiederholung festzulegen?
a) repeat-background
b) background-repeat
c) image-repeat
d) repeat-image

Wie legt man in CSS den Abstand zwischen den Rändern benachbarter Boxen fest?
a) border-spacing
b) margin
c) padding
d) box-spacing

Welches CSS-Attribut positioniert ein Element relativ zu seinem nächsten positionierten Vorfahren?
a) static
b) absolute
c) fixed
d) relative

Welches Attribut legt die Breite eines Elements fest?
a) length
b) size
c) width
d) box-width

Wie wird in CSS eine Schriftart festgelegt?
a) font-family
b) font-type
c) text-family
d) font-style

Welches CSS-Attribut ändert die Zeichenfarbe eines Textes?
a) text-color
b) font-color
c) color
d) foreground-color

Wie definiert man transparente Farben in CSS?
a) rgba
b) rgb
c) transparency
d) opacity

Welches Attribut wird verwendet, um die Innenabstände einer Box in CSS festzulegen?
a) margin
b) padding
c) spacing
d) indent

Welches Attribut in CSS legt den Z-Index eines Elements fest?
a) z-position
b) z-level
c) z-index
d) z-order

Welches Attribut legt fest, wie ein überlappendes Element angezeigt wird?
a) overlay
b) overflow
c) display
d) visibility

JavaScript

Wie definiert man eine Arrow-Funktion in JavaScript?
a) function => { ... }
b) let func = function => { ... }
c) let func = () => { ... }
d) const function = () => { ... }

Welches Schlüsselwort wird verwendet, um eine bedingte Anweisung zu definieren?
a) if
b) when
c) whether
d) condition

Wie prüft man den Typ einer Variablen?
a) typeof variable
b) typeOf variable
c) getType(variable)
d) variable.type

Welche Array-Methode entfernt das letzte Element eines Arrays und gibt es zurück?
a) shift
b) pop
c) unshift
d) push

Wie ruft man eine Methode eines Objekts auf?
a) object:method();
b) object->method();
c) object.method();
d) object(method);

Welches Attribut in JavaScript speichert mehrere Werte in einer einzigen Variable?
a) object
b) list
c) array
d) map

Wie initialisiert man eine Schleife, die von 0 bis 9 zählt?
a) for i in range(0, 10)
b) for (let i = 0; i < 10; i++)
c) while (i < 10)
d) do (let i = 0; i < 10; i++)

Welches Schlüsselwort wird verwendet, um eine Ausnahme zu werfen?
a) catch
b) throw
c) except
d) raise

Wie überprüft man, ob eine Variable undefiniert ist?
a) if (variable undefined)
b) if (typeof variable == 'undefined')
c) if (variable == null)
d) if (variable exists)

Welches Schlüsselwort wird verwendet, um asynchronen Code zu schreiben?
a) synchronous
b) async
c) await
d) defer

PHP

Wie gibt man den Wert einer Variablen aus?
a) echo $variable;
b) print($variable);
c) printf($variable);
d) show $variable;

Welches Zeichen wird verwendet, um eine Variable in PHP zu definieren?
a) $
b) #
c) @
d) %

Wie fügt man einen Kommentar ein, der über mehrere Zeilen geht?
a) // Kommentar
b) /* Kommentar */
c) <!-- Kommentar -->
d) # Kommentar

Welche PHP-Funktion vergleicht zwei Strings?
a) compare()
b) strcmp()
c) strcomp()
d) string_compare()

Wie definiert man eine Konstante in PHP?
a) const NAME = 'value';
b) constant(NAME, 'value');
c) define('NAME', 'value');
d) define NAME = 'value';

Welches Schlüsselwort wird verwendet, um eine Klasse zu definieren?
a) object
b) class
c) define
d) new

Wie prüft man, ob eine Datei existiert?
a) file_exists($filename)
b) is_file($filename)
c) exists_file($filename)
d) check_file($filename)

Wie liest man die Inhalte einer Datei?
a) fread($filename)
b) file_get_contents($filename)
c) read_file($filename)
d) file_open($filename)

Welches Schlüsselwort wird verwendet, um eine Methode in einer Klasse zu definieren?
a) function
b) method
c) func
d) def

Wie beendet man die Ausführung eines PHP-Skriptes?
a) end;
b) exit;
c) stop;
d) finish;

Fehlersuche

Im Code folgender Website Dateien existieren insgesamt 6 Fehler. Finde und benenne sie. Nenne hierzu jeweils die Datei (HTML/CSS/JS), die Zeile im Code und den jeweiligen Fehler.

Beispiel: HTML-Datei, Zeile 6, Schließender Title-Tag hat einen Schreibfehler

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abschlussprüfung</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="klasse-eins">Titel der Seite</h1>
    <button id="button1">Klicken Sie hier</button>
    <div id="ausgabe"></div>

    <script src="script.js"></script>
</body>
</html>

/* Dateiname styles.css */

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.klasse-eins {
    color: #333;
    text-align: center;
}

button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#ausgabe {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    border: 1px solid #ccc;
}


.klasse-eins {
    color: #444; 
    text-align: cetner; 
}

button {
    padding: 10px 20px 30px; 
}

#ausgabe {
    width: 80px; 
    margin: auto; 
    text-align: right; 
}

.klasse-zwei { 
    color: green;
}

.klasse-drei {
    font-size: 16px 
}

//skript.js
document.getElementById("button1").addEventListener("click", function() {
    funktioneins(); // Funktion wird aufgerufen, um den Inhalt zu ändern
});

function funktioneins() {
    var ausgabeDiv = document.getElementById("ausgabe");
    ausgabeDiv.innerHTML = "Button wurde geklickt!";

    for (var i = 0; i < 5; i++) {
        console.log("Schleife läuft: " + i);
    }
}

/* Fehlerhafte JavaScript-Regeln */
document.getElementById("button1").addEventListener("dblclick", function() { // Falscher Event-Typ: sollte 'click' sein
    funktionzwei();
});

function funktionzwei() {
    var ausgabeDiv = document.getElementById("ausgabe");
    ausgabeDiv.innerHTML = "Doppelter Klick!";
} // Diese Funktion wird fälschlicherweise für einen Doppelklick verwendet

document.getElementById("button2").addEventListener("click", function() { // Es gibt keinen Button mit dieser ID
    funktiondrei();
});

function funktiondrei() {
    alert("Button 2 wurde geklickt!");
}

var ausgabeDiv = document.getElementById("ausgabe");
ausgabeDiv.innerHTLM = "Initialer Inhalt"; // Tippfehler: sollte 'innerHTML' sein

document.addEventListener("DOMContentLoaded", funktionvier); // Falsche Klammer

function funktionvier() {
    console.log("Dokument vollständig geladen");
}

Code-Erweiterung JavaScript

Aufgabe:

1. Ergänzen Sie den HTML-Code um eine neue Eingabezeile (<input>) und einen neuen Button unterhalb des Divs mit der ID ausgabe.
2. Implementieren Sie eine neue JavaScript-Funktion funktionfuenf, die bei Klick auf den neuen Button den Text aus der Eingabezeile nimmt und in einem neuen Paragrafen unterhalb des Divs mit der ID ausgabe einfügt.
3. Achten Sie darauf, dass der neue Button einen Event Listener verwendet, der die neue Funktion funktionfuenf aufruft.

Code-Erweiterung PHP

Erweitere den bestehenden PHP-Code um eine Funktion, die einen eingegebenen Text aus einem Formular entgegennimmt und diesen Text auf der Webseite anzeigt. Die Ausgabe soll in einem neuen Absatz (<p>) unterhalb des Formulars erfolgen.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textanzeige</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            margin-top: 50px;
        }
        form {
            margin-bottom: 20px;
        }
        p {
            font-size: 18px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Textanzeige</h1>

    <form method="post" action="">
        <label for="eingabetext">Geben Sie einen Text ein:</label>
        <input type="text" id="eingabetext" name="eingabetext" placeholder="Ihr Text hier">
        <input type="submit" value="Text anzeigen">
    </form>

    <?php
    if (isset($_POST['eingabetext'])) {
        $text = htmlspecialchars($_POST['eingabetext']);
        echo "<p>$text</p>";
    }
    ?>
</body>
</html>