Shove Box
+ {/*
The box is at: {box.position}
+
+
+ {box}
+
*/}
{}
diff --git a/src/form-components/ChangeColor.test.tsx b/src/form-components/ChangeColor.test.tsx
new file mode 100644
index 0000000000..d74ba37243
--- /dev/null
+++ b/src/form-components/ChangeColor.test.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ChangeColor } from "./ChangeColor";
+
+describe("ChangeColor Component tests", () => {
+ beforeEach(() => render(
));
+ test("There are at least 8 radio buttons and the colored box", () => {
+ const radios = screen.getAllByRole("radio");
+ expect(radios.length).toBeGreaterThanOrEqual(8);
+ expect(screen.getByTestId("colored-box")).toBeInTheDocument();
+ });
+ test("Switching the color switches the displayed color.", () => {
+ const radios: HTMLInputElement[] = screen.getAllByRole("radio");
+ // Switch to first
+ radios[0].click();
+ let coloredBox = screen.getByTestId("colored-box");
+ expect(coloredBox).toHaveTextContent(radios[0].value);
+ expect(coloredBox).toHaveStyle({ backgroundColor: radios[0].value });
+ // Switch to third
+ radios[2].click();
+ coloredBox = screen.getByTestId("colored-box");
+ expect(coloredBox).toHaveTextContent(radios[2].value);
+ expect(coloredBox).toHaveStyle({ backgroundColor: radios[2].value });
+ // Switch to 8th
+ radios[7].click();
+ coloredBox = screen.getByTestId("colored-box");
+ expect(coloredBox).toHaveTextContent(radios[7].value);
+ expect(coloredBox).toHaveStyle({ backgroundColor: radios[7].value });
+ // Switch back to first
+ radios[0].click();
+ coloredBox = screen.getByTestId("colored-box");
+ expect(coloredBox).toHaveTextContent(radios[0].value);
+ expect(coloredBox).toHaveStyle({ backgroundColor: radios[0].value });
+ });
+});
diff --git a/src/form-components/ChangeColor.tsx b/src/form-components/ChangeColor.tsx
new file mode 100644
index 0000000000..ad0fcba051
--- /dev/null
+++ b/src/form-components/ChangeColor.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+
+export function ChangeColor(): JSX.Element {
+ const [selectedColor, setSelectedColor] = useState("");
+ const colors = [
+ "red",
+ "blue",
+ "green",
+ "yellow",
+ "purple",
+ "orange",
+ "pink",
+ "brown"
+ ];
+ const handleColorChange = (event: {
+ target: { value: React.SetStateAction
};
+ }) => {
+ setSelectedColor(event.target.value);
+ };
+
+ return (
+
+
Change Color
+
+ {colors.map((color, index) => (
+
+ ))}
+
+
+ {selectedColor || "Select a color"}
+
+
+
+
+ {userAnswer === expectedAnswer ? ✔️ : ❌}
+
+ );
+}
diff --git a/src/form-components/EditMode.test.tsx b/src/form-components/EditMode.test.tsx
new file mode 100644
index 0000000000..b2f2a43a36
--- /dev/null
+++ b/src/form-components/EditMode.test.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { EditMode } from "./EditMode";
+import userEvent from "@testing-library/user-event";
+
+describe("EditMode Component tests", () => {
+ beforeEach(() => render());
+ test("There is one checkbox and no textboxes", () => {
+ const switchButton = screen.getByRole("checkbox");
+ expect(switchButton).toBeInTheDocument();
+ expect(switchButton.parentElement).toHaveClass("form-switch");
+ expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+ });
+ test("Initial text should be 'Your Name is a student'.", () => {
+ expect(screen.getByText(/Your Name is a student/i)).toBeInTheDocument();
+ });
+ test("Can switch into Edit Mode", () => {
+ const switchButton = screen.getByRole("checkbox");
+ switchButton.click();
+ expect(screen.getByRole("textbox")).toBeInTheDocument();
+ expect(screen.getAllByRole("checkbox")).toHaveLength(2);
+ });
+ test("Editing the name and student status changes the text", () => {
+ const switchButton = screen.getByRole("checkbox");
+ switchButton.click();
+ const nameBox = screen.getByRole("textbox");
+ userEvent.type(nameBox, "Ada Lovelace");
+ const studentBox = screen.getByRole("checkbox", { name: /student/i });
+ studentBox.click();
+ switchButton.click();
+ expect(
+ screen.getByText(/Ada Lovelace is not a student/i)
+ ).toBeInTheDocument();
+ });
+ test("Different name, click student box twice changes the text", () => {
+ const switchButton = screen.getByRole("checkbox");
+ switchButton.click();
+ const nameBox = screen.getByRole("textbox");
+ userEvent.type(nameBox, "Alan Turing");
+ const studentBox = screen.getByRole("checkbox", { name: /student/i });
+ studentBox.click();
+ studentBox.click();
+ switchButton.click();
+ expect(
+ screen.getByText(/Alan Turing is a student/i)
+ ).toBeInTheDocument();
+ });
+});
diff --git a/src/form-components/EditMode.tsx b/src/form-components/EditMode.tsx
new file mode 100644
index 0000000000..391208db07
--- /dev/null
+++ b/src/form-components/EditMode.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+
+export function EditMode(): JSX.Element {
+ const [editMode, setEditMode] = useState(false);
+ const [userName, setUserName] = useState("Your Name");
+ const [isStudent, setIsStudent] = useState(true);
+
+ const handleEditModeToggle = () => {
+ setEditMode(!editMode);
+ };
+ const handleUserNameChange = (event: {
+ target: { value: React.SetStateAction };
+ }) => {
+ setUserName(event.target.value);
+ };
+
+ const handleStudentCheckboxChange = () => {
+ setIsStudent(!isStudent);
+ };
+ return (
+
+
Edit Mode
+
+
+
+
+ {editMode ? (
+
+
+
+
+
+ ) : (
+
+
+ {userName} is{" "}
+ {isStudent ? "a student" : "not a student"}
+
+
+ )}
+
+
Give Attempts
+
Attempts Left: {attemptsLeft}
+
+
+ setRequestedAttempts(e.target.value)}
+ />
+
+
+
+
+
Multiple Choice Question
+
+
+ {selectedChoice === expectedAnswer ? (
+ ✔️
+ ) : (
+ ❌
+ )}
+
+ );
+}