curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a3194160f8f5620ddf21.md
Immediately after your h1 element, create four label elements.
Inside of each of the label elements, create an input element with the type attribute set to "checkbox".
After each input element, give your label elements the following texts, in order: Sound Effects, Background Music, Hard Mode, and Haptic Feedback.
You should have four label elements.
assert.lengthOf(document.querySelectorAll("label"), 4);
Your first label element should have an input element.
assert.exists(document.querySelectorAll("label")[0]?.querySelector("input"));
Your first input element should have the type attribute set to checkbox.
assert.strictEqual(document.querySelectorAll("label")[0]?.querySelector("input")?.type, "checkbox");
Your first label element should have the text Sound Effects.
assert.match(document.querySelectorAll("label")[0]?.textContent, /Sound Effects/i);
Your Sound Effects text should come after the input element.
assert.match(document.querySelectorAll("label")[0]?.innerHTML, /\<input[^>]*>\s*Sound Effects/i)
Your second label element should have an input element.
assert.exists(document.querySelectorAll("label")[1]?.querySelector("input"));
Your second input element should have the type attribute set to checkbox.
assert.strictEqual(document.querySelectorAll("label")[1]?.querySelector("input")?.type, "checkbox");
Your second label element should have the text Background Music.
assert.match(document.querySelectorAll("label")[1]?.textContent, /Background Music/i)
Your Background Music text should come after the input element.
assert.match(document.querySelectorAll("label")[1]?.innerHTML, /\<input[^>]*>\s*Background Music/i)
Your third label element should have an input element.
assert.exists(document.querySelectorAll("label")[2]?.querySelector("input"));
Your third input element should have the type attribute set to checkbox.
assert.strictEqual(document.querySelectorAll("label")[2]?.querySelector("input")?.type, "checkbox");
Your third label element should have the text Hard Mode.
assert.match(document.querySelectorAll("label")[2]?.textContent, /Hard Mode/i)
Your Hard Mode text should come after the input element.
assert.match(document.querySelectorAll("label")[2]?.innerHTML, /\<input[^>]*>\s*Hard Mode/i)
Your fourth label element should have an input element.
assert.exists(document.querySelectorAll("label")[3]?.querySelector("input"));
Your fourth input element should have the type attribute set to checkbox.
assert.strictEqual(document.querySelectorAll("label")[3]?.querySelector("input")?.type, "checkbox");
Your fourth label element should have the text Haptic Feedback.
assert.match(document.querySelectorAll("label")[3]?.textContent, /Haptic Feedback/i)
Your Haptic Feedback text should come after the input element.
assert.match(document.querySelectorAll("label")[3]?.innerHTML, /\<input[^>]*>\s*Haptic Feedback/i)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game Settings Panel</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<h1>Game Settings</h1>
--fcc-editable-region--
--fcc-editable-region--
</div>
</body>
</html>