1. Vorbereitung auf die Abschlussprüfung
Aufgabenstellung
20 Multiple Choice Fragen
HTML
Was ist ein gültiges HTML-Tag für eine Überschrift der höchsten Ebene?
a) <heading>
b) <h1>
c) <header>
d) <h6>
Welches Attribut wird verwendet, um einen Link in einem neuen Tab zu öffnen?
a) rel="noopener"
b) target="_new"
c) target="_blank"
d) rel="newtab"
Welches HTML-Tag wird verwendet, um einen Absatz zu erstellen?
a) <span>
b) <p>
c) <div>
d) <section>
Wie definiert man eine HTML-Dokumenttyp-Deklaration korrekt?
a) <!DOCTYPE html>
b) <DOCTYPE html>
c) <doctype html>
d) <!doctype html>
Welches Attribut wird verwendet, um eine Bildquelle anzugeben?
a) src
b) href
c) alt
d) data-src
CSS
Wie definiert man eine Klasse in CSS?
a) .classname {}
b) #classname {}
c) classname {}
d) .classname()
Welches CSS-Attribut ändert die Textfarbe?
a) font-color
b) text-color
c) color
d) color-text
Wie erstellt man einen abgerundeten Rand für ein Element in CSS?
a) border-radius
b) border-round
c) radius-border
d) round-border
Welcher Wert für das display-Attribut entfernt ein Element vollständig aus dem Dokumentenfluss?
a) none
b) hidden
c) block
d) inline
Welches Attribut in CSS wird verwendet, um den Abstand außerhalb eines Elements zu definieren?
a) padding
b) border
c) margin
d) spacing
JavaScript
Wie erstellt man eine Variable in JavaScript?
a) var name;
b) variable name;
c) v name;
d) variable: name;
Welche Methode wird verwendet, um eine Zeichenkette in der Konsole auszugeben?
a) console.log()
b) console.print()
c) console.write()
d) console.show()
Wie definierst du eine anonyme Funktion?
a) function() { ... }
b) () => { ... }
c) function name() { ... }
d) anonymous function() { ... }
Welche Schleife wird verwendet, um einen Block von Anweisungen auszuführen, solange eine bestimmte Bedingung wahr ist?
a) for
b) if
c) do...while
d) while
Wie greifst du auf ein Element mit der ID „example“ zu?
a) document.getElementById("example")
b) document.getElement("example")
c) document.querySelector("#example")
d) document.getElementBy("#example")
PHP
Wie beginnt ein PHP-Skript?
a) <?php
b) </php>
c) <php>
d) <?php>
Welche Methode wird verwendet, um Daten aus einem Formular zu erhalten, das mit der Methode „POST“ gesendet wurde?
a) $_GET['name']
b) $_FORM['name']
c) $_REQUEST['name']
d) $_POST['name']
Wie definiert man eine Funktion in PHP?
a) def myFunction() {}
b) define myFunction() {}
c) function myFunction() {}
d) func myFunction() {}
Mit welcher PHP-Funktion kann eine Datei in eine Zeichenkette gelesen werden?
a) read_file()
b) fopen()
c) file_get_contents()
d) file_read()
Wie kannst du einen String in PHP ausgeben?
a) expose
b) echo
c) dump
d) print_string
HTML
Was ist ein gültiges HTML-Tag für eine Überschrift der höchsten Ebene?
a) <heading>
b) <h1> (richtige Antwort)
c) <header>
d) <h6>
Welches Attribut wird verwendet, um einen Link in einem neuen Tab zu öffnen?
a) rel="noopener"
b) target="_new"
c) target="_blank" (richtige Antwort)
d) rel="newtab"
Welches HTML-Tag wird verwendet, um einen Absatz zu erstellen?
a) <span>
b) <p> (richtige Antwort)
c) <div>
d) <section>
Wie definiert man eine HTML-Dokumenttyp-Deklaration korrekt?
a) <!DOCTYPE html> (richtige Antwort)
b) <DOCTYPE html>
c) <doctype html>
d) <!doctype html>
Welches Attribut wird verwendet, um eine Bildquelle anzugeben?
a) src (richtige Antwort)
b) href
c) alt
d) data-src
CSS
Wie definiert man eine Klasse in CSS?
a) .classname {} (richtige Antwort)
b) #classname {}
c) classname {}
d) .classname()
Welches CSS-Attribut ändert die Textfarbe?
a) font-color
b) text-color
c) color (richtige Antwort)
d) color-text
Wie erstellt man einen abgerundeten Rand für ein Element in CSS?
a) border-radius (richtige Antwort)
b) border-round
c) radius-border
d) round-border
Welcher Wert für das display-Attribut entfernt ein Element vollständig aus dem Dokumentenfluss?
a) none (richtige Antwort)
b) hidden
c) block
d) inline
Welches Attribut in CSS wird verwendet, um den Abstand außerhalb eines Elements zu definieren?
a) padding
b) border
c) margin (richtige Antwort)
d) spacing
JavaScript
Wie erstellt man eine Variable in JavaScript?
a) var name; (richtige Antwort)
b) variable name;
c) v name;
d) variable: name;
Welche Methode wird verwendet, um eine Zeichenkette in der Konsole auszugeben?
a) console.log() (richtige Antwort)
b) console.print()
c) console.write()
d) console.show()
Wie definierst du eine anonyme Funktion?
a) function() { ... } (richtige Antwort)
b) () => { ... }
c) function name() { ... }
d) anonymous function() { ... }
Welche Schleife wird verwendet, um einen Block von Anweisungen auszuführen, solange eine bestimmte Bedingung wahr ist?
a) for
b) if
c) do...while
d) while (richtige Antwort)
Wie greifst du auf ein Element mit der ID „example“ zu?
a) document.getElementById("example") (richtige Antwort)
b) document.getElement("example")
c) document.querySelector("#example")
d) document.getElementBy("#example")
PHP
Wie beginnt ein PHP-Skript?
a) <?php (richtige Antwort)
b) </php>
c) <php>
d) <?php>
Welche Methode wird verwendet, um Daten aus einem Formular zu erhalten, das mit der Methode "POST" gesendet wurde?
a) $_GET['name']
b) $_FORM['name']
c) $_REQUEST['name']
d) $_POST['name'] (richtige Antwort)
Wie definiert man eine Funktion in PHP?
a) def myFunction() {}
b) define myFunction() {}
c) function myFunction() {} (richtige Antwort)
d) func myFunction() {}
Mit welcher PHP-Funktion kann eine Datei in eine Zeichenkette gelesen werden?
a) read_file()
b) fopen()
c) file_get_contents() (richtige Antwort)
d) file_read()
Wie kannst du einen String in PHP ausgeben?
a) expose
b) echo (richtige Antwort)
c) dump
d) print_stringFehlersuche
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>Prüfungswebsite</titel>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<h1>Willkommen zur Prüfungswebsite</h1>
<p id="einleitung">Diese Webseite enthält mehrere Fehler, die gefunden werden müssen.</p>
<button id="klickMich">Klick mich!</button>
<button id="hoverMich">Hover mich!</button>
<script src="skript.js"></script>
</body>
</html>/* Dateiname stil.css */
body {
font-famil: Arial, sans-serif;
background-color: #f0f0f0;
}
#einleitung h2 {
color: blue;
}/* Dateinahme stil.css */
* Fehler 1: Ungültige Eigenschaft */
body {
font-famil: Arial, sans-serif; /* Fehler: 'font-famil' sollte 'font-family' sein */
background-color: #f0f0f0;
}
/* Fehler 2: Falsche Selektor-Syntax */
#einleitung h2 {
color: blue; /* Fehler: Es gibt kein <h2> innerhalb von #einleitung. Es sollte einfach #einleitung sein */
}//skript.js
document.addEventListener('DOMContentLoaded', function() {
let knopf1 = document.getElementById('klikMich');
knopf1.addEventListener('click', function() {
alert('Knopf wurde geklickt!');
});
let knopf2 = document.getElementById('hoverMich');
knopf2.addEventListener('mouseover', function() {
alert('Knopf wurde gehovt!');
});
let div = document.createElement('div');
div.textContent = 'Dieser Text wird hinzugefügt.';
document.body.apendChild(div);
});
// skript.js
document.addEventListener('DOMContentLoaded', function() {
// Fehler 1: Falsche ID
let knopf1 = document.getElementById('klikMich'); // Fehler: 'klikMich' sollte 'klickMich' sein
knopf1.addEventListener('click', function() {
alert('Knopf wurde geklickt!');
});
// Fehler 2: Falsches Event
let knopf2 = document.getElementById('hoverMich');
knopf2.addEventListener('mouseover', function() { // Fehler: Event 'mouseover' sollte 'click' sein, um Übereinstimmung mit Aufgabe zu haben
alert('Knopf wurde gehovt!'); // Fehler: Text sollte 'Knopf wurde geklickt!' sein, um konsistent zu sein
});
// Fehler 3: Fehlende Funktion
let div = document.createElement('div');
div.textContent = 'Dieser Text wird hinzugefügt.';
// Fehler: appendChild() fehlt
document.body.apendChild(div); // Fehler: 'apendChild' sollte 'appendChild' sein
});Code-Erweiterung JavaScript
Füge eine neue Funktion hinzu, die einen neuen Paragraphen unterhalb des bestehenden Paragraphen einfügt, wenn auf den Button mit der ID ’neuerButton‘ geklickt wird.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JavaScript Prüfung</title>
</head>
<body>
<h1>Willkommen zur JavaScript Aufgabe</h1>
<p id="text">Dieser Text soll geändert werden.</p>
<button id="aenderButton">Text ändern</button>
<script src="aufgabe.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JavaScript Anfänger Aufgabe</title>
</head>
<body>
<h1>Willkommen zur JavaScript Aufgabe</h1>
<p id="text">Dieser Text soll geändert werden.</p>
<button id="aenderButton">Text ändern</button>
<button id="neuerButton">Neuer Text</button> <!-- Button für die neue Funktion -->
<script src="aufgabe.js"></script>
</body>
</html>// aufgabe.js
document.addEventListener('DOMContentLoaded', function() {
// Bestehende Funktionalität: Text ändern
let aenderButton = document.getElementById('aenderButton');
aenderButton.addEventListener('click', function() {
let textElement = document.getElementById('text');
textElement.textContent = 'Der Text wurde geändert!';
});
});document.addEventListener('DOMContentLoaded', function() {
// Bestehende Funktionalität: Text ändern
let aenderButton = document.getElementById('aenderButton');
aenderButton.addEventListener('click', function() {
let textElement = document.getElementById('text');
textElement.textContent = 'Der Text wurde geändert!';
});
// HINZUGEFÜGT: Neue Funktionalität: Zusätzlichen Text einfügen
/*
Aufgabe: Fügen Sie eine neue Funktion hinzu, die bei Klicken auf den neuen Button
mit der ID 'neuerButton' einen neuen Paragraphen (<p>) mit dem Text 'Neuer Paragraph hinzugefügt!'
unterhalb des bestehenden Paragraphen einfügt.
*/
// LÖSUNG:
let neuerButton = document.getElementById('neuerButton');
neuerButton.addEventListener('click', function() {
let neuerParagraph = document.createElement('p');
neuerParagraph.textContent = 'Neuer Paragraph hinzugefügt!';
document.body.appendChild(neuerParagraph);
});
});Code-Erweiterung PHP
Füge eine neue Funktion hinzu, die bei Klicken auf den neuen Button mit dem Name ’neuerButton‘ einen neuen Paragraphen (<p>) mit dem Text ‚Neuer Paragraph hinzugefügt!‘ unterhalb des bestehenden Paragraphen einfügt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>PHP Prüfung</title>
</head>
<body>
<h1>Willkommen zur PHP Aufgabe</h1>
<p><?php echo "Dieser Text wird von PHP generiert."; ?></p>
<form method="post">
<button type="submit" name="aenderButton">Text ändern</button>
<button type="submit" name="neuerButton">Neuer Text</button> <!-- Button für die neue Funktion -->
</form>
<?php
// Bestehende Funktionalität: Text ändern
if (isset($_POST['aenderButton'])) {
echo "<p>Der Text wurde geändert!</p>";
}
?>
</body>
</html><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>PHP Prüfung</title>
</head>
<body>
<h1>Willkommen zur PHP Aufgabe</h1>
<p><?php echo "Dieser Text wird von PHP generiert."; ?></p>
<form method="post">
<button type="submit" name="aenderButton">Text ändern</button>
<button type="submit" name="neuerButton">Neuer Text</button> <!-- Button für die neue Funktion -->
</form>
<?php
// Bestehende Funktionalität: Text ändern
if (isset($_POST['aenderButton'])) {
echo "<p>Der Text wurde geändert!</p>";
}
// HINZUGEFÜGT: Neue Funktionalität: Zusätzlichen Text einfügen
/*
Aufgabe: Fügen Sie eine neue Funktion hinzu, die bei Klicken auf den neuen Button
mit dem Name 'neuerButton' einen neuen Paragraphen (<p>) mit dem Text 'Neuer Paragraph hinzugefügt!'
unterhalb des bestehenden Paragraphen einfügt.
*/
// LÖSUNG:
if (isset($_POST['neuerButton'])) {
echo "<p>Neuer Paragraph hinzugefügt!</p>";
}
?>
</body>
</html>