2. Vorbereitung auf die Abschlussprüfung

Aufgabenstellung

40 Multiple Choice Fragen

HTML

Welches HTML-Tag erstellt eine Liste ohne Ordnung?
a) <ol>
b) <ul>
c) <li>
d) <list>

Welches Attribut wird verwendet, um eine alternative Textbeschreibung für ein Bild anzugeben?
a) title
b) alt
c) src
d) description

Wie fügt man eine Tabelle in HTML ein?
a) <table>
b) <tr>
c) <td>
d) <tab>

Welches HTML-Tag wird verwendet, um einen Hyperlink zu erstellen?
a) <a>
b) <link>
c) <href>
d) <url>

Wie definiert man eine Liste mit geordneter Reihenfolge?
a) <ul>
b) <li>
c) <ol>
d) <list>

Welches Attribut eines Formularfeldes gibt an, dass das Feld ausgefüllt werden muss?
a) required
b) mandatory
c) needed
d) must

Welches HTML-Tag wird verwendet, um einen Abschnitt im Text fett darzustellen?
a) <b>
b) <strong>
c) <em>
d) <i>

In welchem HTML-Tag wird der Titel des Dokuments definiert?
a) <meta>
b) <title>
c) <head>
d) <header>

Welches HTML-Tag wird verwendet, um einen Abschnitt im Dokument horizontal zu trennen?
a) <div>
b) <line>
c) <hr>
d) <br>

Was wird verwendet, um CSS in das HTML-Dokument einzubinden?
a) <style>
b) <link>
c) <script>
d) <css>

CSS

Welches CSS-Attribut wird verwendet, um den Zeilenabstand festzulegen?
a) line-spacing
b) line-height
c) line-space
d) spacing-height

Wie kann die Hintergrundfarbe eines Elements geändert werden?
a) background-color
b) bgcolor
c) color-background
d) background

Welches CSS-Attribut legt den Innenabstand eines Elements fest?
a) spacing
b) padding
c) margin
d) border

Wie kann ein Text zentriert werden?
a) text-align: center;
b) align-text: center;
c) text-center: true;
d) text-align: middle;

Welches Attribut definiert den Rahmen eines Elements?
a) frame
b) border
c) outline
d) box

Welches Attribut beeinflusst die Sichtbarkeit eines Elements?
a) hidden
b) visibility
c) display
d) opacity

Wie kann man ein Hintergrundbild festlegen, das nicht scrollt?
a) background-attachment: fixed;
b) background-scroll: no;
c) background-fixed: true;
d) scroll-fixed: false;

Welches CSS-Attribut legt die Schriftgröße fest?
a) font-size
b) text-size
c) letter-size
d) font-height

Welches Attribut bestimmt die Abstände zwischen einzelnen Zeichen?
a) letter-space
b) word-spacing
c) letter-spacing
d) character-spacing

Welches Attribut wird verwendet, um die Elemente innerhalb eines Container-Elements auszurichten?
a) align-items
b) text-align
c) justify-items
d) align-content

JavaScript

Wie fügt man einen einzeiligen Kommentar in JavaScript ein?
a) 
b) /* Kommentar */
c) // Kommentar
d) # Kommentar

Welches Schlüsselwort wird verwendet, um eine Konstante zu deklarieren?
a) constant
b) const
c) let
d) static

Wie fügt man ein Array in JavaScript ein?
a) let array = "item1, item2, item3";
b) let array = (item1, item2, item3);
c) let array = [item1, item2, item3];
d) let array = {item1, item2, item3};

Welche der folgenden Methoden wird verwendet, um ein Element nach seiner Klasse zu erhalten?
a) getElementById
b) getElementsByClassName
c) querySelector
d) getElementsByName

Wie ruft man eine Funktion in JavaScript auf?
a) myFunction[];
b) myFunction();
c) myFunction;
d) call myFunction();

Was ist die Ausgabe von console.log(typeof null);?
a) null
b) undefined
c) object
d) string

Mit welchem Befehl wird die Ausführung einer Schleife sofort beendet?
a) end
b) break
c) stop
d) exit

Wie konvertiert man eine Zeichenkette in eine Ganzzahl?
a) Number("123")
b) toInteger("123")
c) parseInt("123")
d) int("123")

Welches Attribut überprüft, ob eine Variable einen bestimmten Wert hat?
a) ==
b) ===
c) =
d) !=

Wie ersetzt man in einer Zeichenkette alle Vorkommen eines bestimmten Zeichens?
a) replaceAll('a', 'b')
b) replace(/a/g, 'b')
c) replace('a', 'b')
d) replaceAll(/a/, 'b')

PHP

Wie definiert man ein Array in PHP?
a) array = [1, 2, 3];
b) $array = array(1, 2, 3);
c) array = array(1, 2, 3);
d) array(1, 2, 3);

Welche Methode wird verwendet, um eine Datei auf den Server hochzuladen?
a) upload_file
b) move_uploaded_file
c) file_upload
d) upload

Wie überprüft man, ob eine Variable in PHP definiert ist?
a) isset($variable)
b) exist($variable)
c) check($variable)
d) defined($variable)

Wie kommentiert man eine einzelne Zeile in PHP?
a) /* Kommentar */
b) 
c) # Kommentar
d) // Kommentar

Mit welcher Funktion kann man die Länge eines Arrays bestimmen?
a) count($array)
b) length($array)
c) size($array)
d) array_length($array)

Wie verbindet man sich mit einer MySQL-Datenbank in PHP?
a) mysqli_connect
b) mysql_connect
c) database_connect
d) db_connect

Wie liest man eine Datei Zeile für Zeile in PHP?
a) file()
b) readlines()
c) fgets()
d) getlines()

Wie definiert man eine Variable in PHP?
a) variable $name;
b) $name;
c) var $name;
d) $name = value;

Wie gibt man ein Array als JSON aus?
a) json_parse($array)
b) json_encode($array)
c) json_array($array)
d) json_stringify($array)

Welche PHP-Funktion beendet ein Skript?
a) exit()
b) end()
c) die()
d) stop()

Lösung

HTML
Welches HTML-Tag erstellt eine Liste ohne Ordnung?
a) <ol>
b) <ul> (richtige Antwort)
c) <li>
d) <list>

Welches Attribut wird verwendet, um eine alternative Textbeschreibung für ein Bild anzugeben?
a) title
b) alt (richtige Antwort)
c) src
d) description

Wie fügt man eine Tabelle in HTML ein?
a) <table> (richtige Antwort)
b) <tr>
c) <td>
d) <tab>

Welches HTML-Tag wird verwendet, um einen Hyperlink zu erstellen?
a) <a> (richtige Antwort)
b) <link>
c) <href>
d) <url>

Wie definiert man eine Liste mit geordneter Reihenfolge?
a) <ul>
b) <li>
c) <ol> (richtige Antwort)
d) <list>

Welches Attribut eines Formularfeldes gibt an, dass das Feld ausgefüllt werden muss?
a) required (richtige Antwort)
b) mandatory
c) needed
d) must

Welches HTML-Tag wird verwendet, um einen Abschnitt im Text fett darzustellen?
a) <b> (richtige Antwort)
b) <strong>
c) <em>
d) <i>

In welchem HTML-Tag wird der Titel des Dokuments definiert?
a) <meta>
b) <title> (richtige Antwort)
c) <head>
d) <header>

Welches HTML-Tag wird verwendet, um einen Abschnitt im Dokument horizontal zu trennen?
a) <div>
b) <line>
c) <hr> (richtige Antwort)
d) <br>

Was wird verwendet, um CSS in das HTML-Dokument einzubinden?
a) <style> (richtige Antwort)
b) <link>
c) <script>
d) <css>

CSS
Welches CSS-Attribut wird verwendet, um den Zeilenabstand festzulegen?
a) line-spacing
b) line-height (richtige Antwort)
c) line-space
d) spacing-height

Wie kann die Hintergrundfarbe eines Elements geändert werden?
a) background-color (richtige Antwort)
b) bgcolor
c) color-background
d) background

Welches CSS-Attribut legt den Innenabstand eines Elements fest?
a) spacing
b) padding (richtige Antwort)
c) margin
d) border

Wie kann ein Text zentriert werden?
a) text-align: center; (richtige Antwort)
b) align-text: center;
c) text-center: true;
d) text-align: middle;

Welches Attribut definiert den Rahmen eines Elements?
a) frame
b) border (richtige Antwort)
c) outline
d) box

Welches Attribut beeinflusst die Sichtbarkeit eines Elements?
a) hidden
b) visibility (richtige Antwort)
c) display
d) opacity

Wie kann man ein Hintergrundbild festlegen, das nicht scrollt?
a) background-attachment: fixed; (richtige Antwort)
b) background-scroll: no;
c) background-fixed: true;
d) scroll-fixed: false;

Welches CSS-Attribut legt die Schriftgröße fest?
a) font-size (richtige Antwort)
b) text-size
c) letter-size
d) font-height

Welches Attribut bestimmt die Abstände zwischen einzelnen Zeichen?
a) letter-space
b) word-spacing
c) letter-spacing (richtige Antwort)
d) character-spacing

Welches Attribut wird verwendet, um die Elemente innerhalb eines Container-Elements auszurichten?
a) align-items (richtige Antwort)
b) text-align
c) justify-items
d) align-content

JavaScript
Wie fügt man einen einzeiligen Kommentar in JavaScript ein?
a) <!-- Kommentar -->
b) /* Kommentar */
c) // Kommentar (richtige Antwort)
d) # Kommentar

Welches Schlüsselwort wird verwendet, um eine Konstante zu deklarieren?
a) constant
b) const (richtige Antwort)
c) let
d) static

Wie fügt man ein Array in JavaScript ein?
a) let array = "item1, item2, item3";
b) let array = (item1, item2, item3);
c) let array = [item1, item2, item3]; (richtige Antwort)
d) let array = {item1, item2, item3};

Welche der folgenden Methoden wird verwendet, um ein Element nach seiner Klasse zu erhalten?
a) getElementById
b) getElementsByClassName (richtige Antwort)
c) querySelector
d) getElementsByName

Wie ruft man eine Funktion in JavaScript auf?
a) myFunction[];
b) myFunction(); (richtige Antwort)
c) myFunction;
d) call myFunction();

Was ist die Ausgabe von console.log(typeof null);?
a) null
b) undefined
c) object (richtige Antwort)
d) string

Mit welchem Befehl wird die Ausführung einer Schleife sofort beendet?
a) end
b) break (richtige Antwort)
c) stop
d) exit

Wie konvertiert man eine Zeichenkette in eine Ganzzahl?
a) Number("123")
b) toInteger("123")
c) parseInt("123") (richtige Antwort)
d) int("123")

Welches Attribut überprüft, ob eine Variable einen bestimmten Wert hat?
a) ==
b) === (richtige Antwort)
c) =
d) !=

Wie ersetzt man in einer Zeichenkette alle Vorkommen eines bestimmten Zeichens?
a) replaceAll('a', 'b')
b) replace(/a/g, 'b') (richtige Antwort)
c) replace('a', 'b')
d) replaceAll(/a/, 'b')

PHP
Wie definiert man ein Array in PHP?
a) array = [1, 2, 3];
b) $array = array(1, 2, 3); (richtige Antwort)
c) array = array(1, 2, 3);
d) array(1, 2, 3);

Welche Methode wird verwendet, um eine Datei auf den Server hochzuladen?
a) upload_file
b) move_uploaded_file (richtige Antwort)
c) file_upload
d) upload

Wie überprüft man, ob eine Variable in PHP definiert ist?
a) isset($variable) (richtige Antwort)
b) exist($variable)
c) check($variable)
d) defined($variable)

Wie kommentiert man eine einzelne Zeile in PHP?
a) /* Kommentar */
b) <!-- Kommentar -->
c) # Kommentar
d) // Kommentar (richtige Antwort)

Mit welcher Funktion kann man die Länge eines Arrays bestimmen?
a) count($array) (richtige Antwort)
b) length($array)
c) size($array)
d) array_length($array)

Wie verbindet man sich mit einer MySQL-Datenbank in PHP?
a) mysqli_connect (richtige Antwort)
b) mysql_connect
c) database_connect
d) db_connect

Wie liest man eine Datei Zeile für Zeile in PHP?
a) file()
b) readlines()
c) fgets() (richtige Antwort)
d) getlines()

Wie definiert man eine Variable in PHP?
a) variable $name;
b) $name;
c) var $name;
d) $name = value; (richtige Antwort)

Wie gibt man ein Array als JSON aus?
a) json_parse($array)
b) json_encode($array) (richtige Antwort)
c) json_array($array)
d) json_stringify($array)

Welche PHP-Funktion beendet ein Skript?
a) exit() (richtige Antwort)
b) end()
c) die()
d) stop()

Fehlersuche

Im Code folgender Website Dateien existieren insgesamt 10 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 2</titel>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Willkommen zur Abschlussprüfung</h1>
    <button id="actionButton">Klicken Sie hier</button>
    <div id="output"></div>

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

/* Dateiname style.css */

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

h1 {
    color: #333;
    text-align: center;
}

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

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


h1 {
    color: #333; 
    text-align: center;
}

buttonn { 
    background-color: blue;
}

#output {
    widht: 80%; 
    margin: 0 auto;
    text-align: cetner;
}

.rote-klasse { 
    color: red;
}

.weitere-klasse {
    font-size: 16px;

//skript.js
document.getElementById("actionButton").addEventListener("click", function() {
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = "Button wurde geklickt!";
});

document.getElementById("actionButton").addEventListener("clik", function() { 
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = "Button wurde geklickt!";
});

function updateOutput() {
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = "Neuer Inhalt";
} 

document.getElementById("nonExistentButton").addEventListener("click", function() { 
    alert("Was ist hier los?");
});

var outputDiv = document.getElementById("output");
outputDiv.inerHTML = "Initialer Inhalt"; 

document.addEventListener("DOMContentLoded", function() { 
    console.log("Dokument vollständig geladen");
});

Lösung CSS

/* Dateinahme style.css */

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

h1 {
    color: #333;
    text-align: center;
}

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

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

/* Fehlerhafte CSS-Regeln */
h1 {
    color: #333; /* doppelter Eintrag */
    text-align: center;
}

buttonn { /* Tippfehler: sollte 'button' sein */
    background-color: blue;
}

#output {
    widht: 80%; /* Tippfehler: sollte 'width' sein */
    margin: 0 auto;
    text-align: cetner; /* Tippfehler: sollte 'center' sein */
}

.missing-class { /* Diese Klasse wird im HTML nicht verwendet */
    color: red;
}

.invalid-syntax {
    font-size: 16px; /* Keine abschließende Klammer */

Lösung JavaScript


// skript.js
document.getElementById("actionButton").addEventListener("click", function() {
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = "Button wurde geklickt!";
});

/* Fehlerhafte JavaScript-Regeln */
document.getElementById("actionButton").addEventListener("clik", function() { // Tippfehler: sollte 'click' sein
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = "Button wurde geklickt!";
});

function updateOutput() {
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = "Neuer Inhalt";
} // Keine Funktion wird aufgerufen, um diese Funktion auszuführen

document.getElementById("nonExistentButton").addEventListener("click", function() { // Es gibt keinen Button mit dieser ID
    alert("Was ist hier los?");
});

var outputDiv = document.getElementById("output");
outputDiv.inerHTML = "Initialer Inhalt"; // Tippfehler: sollte 'innerHTML' sein

document.addEventListener("DOMContentLoded", function() { // Tippfehler: sollte 'DOMContentLoaded' sein
    console.log("Dokument vollständig geladen");
});

Code-Erweiterung JavaScript

Schließe den Button an die Funktionen an. Erweitere die Funktion, sodass der Tabelleninhalt auf Knopfdruck ausgegeben wird. Jede Reihe in der Tabelle soll auch eine neue Reihe in der Ausgabe sein.

<!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>
</head>
<body>
    <h1>JavaScript Aufgabe</h1>
    <button>Tabelle ausgeben</button>
    <table id="dataTable">
        <tr>
            <th>Name</th>
            <th>Alter</th>
            <th>Stadt</th>
        </tr>
        <tr>
            <td>Max Mustermann</td>
            <td>25</td>
            <td>Berlin</td>
        </tr>
        <tr>
            <td>Maria Musterfrau</td>
            <td>30</td>
            <td>Hamburg</td>
        </tr>
    </table>
    <p id="output">Auszugebender Paragraf</p>

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

// script.js
document.getElementById("actionButton").addEventListener("click", function() {
    inhaltAusgeben(); 
});

function inhaltAusgeben() {
    var ausgabeParagraph = document.getElementById("output");
    ausgabeParagraph.innerText = ausgabeText;
}

Lösung HTML

<!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>
</head>
<body>
    <h1>JavaScript Aufgabe</h1>
    <button id="actionButton">Tabelle ausgeben</button>
    <table id="dataTable">
        <tr>
            <th>Name</th>
            <th>Alter</th>
            <th>Stadt</th>
        </tr>
        <tr>
            <td>Max Mustermann</td>
            <td>25</td>
            <td>Berlin</td>
        </tr>
        <tr>
            <td>Maria Musterfrau</td>
            <td>30</td>
            <td>Hamburg</td>
        </tr>
    </table>
    <p id="output"></p>

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

Lösung JavaScript

document.getElementById("actionButton").addEventListener("click", function() {
    inhaltAusgeben(); 
});

function inhaltAusgeben() {
    var tabelle = document.getElementById("dataTable");
    var zeilen = tabelle.rows; 
    var ausgabeText = "";

    for (var i = 0; i < zeilen.length; i++) {
        var zellen = zeilen[i].cells; 
        for (var j = 0; j < zellen.length; j++) {
            ausgabeText += zellen[j].innerText + " ";
        }
        ausgabeText += "\n";
    }

    var ausgabeParagraph = document.getElementById("output");
    ausgabeParagraph.innerText = ausgabeText;
}

Code-Erweiterung PHP

Erweitern Sie den bestehenden PHP-Code um eine Funktion, die den eingegebenen Hex-Farbwert aus dem Formular entgegennimmt und diesen Farbwert als CSS-Farbcode für die Überschriften und Paragrafen im HTML-Dokument verwendet.

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Beispielüberschrift</h1>
    <p>Dies ist ein Beispieltext.</p>

    <form method="post" action="">
        <label for="hexfarbe">Hex-Farbcode:</label>
        <input type="text" id="hexfarbe" name="hexfarbe" placeholder="#ff0000">
        <input type="submit" value="Farbe ändern">
    </form>
</body>
</html>

Lösung PHP

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        <?php
        if (isset($_POST['hexfarbe'])) {
            $hexfarbe = htmlspecialchars($_POST['hexfarbe']);
            echo "
            h1, p {
                color: $hexfarbe;
            }
            ";
        }
        ?>
    </style>
</head>
<body>
    <h1>Beispielüberschrift</h1>
    <p>Dies ist ein Beispieltext.</p>

    <form method="post" action="">
        <label for="hexfarbe">Hex-Farbcode:</label>
        <input type="text" id="hexfarbe" name="hexfarbe" placeholder="#ff0000">
        <input type="submit" value="Farbe ändern">
    </form>
</body>
</html>