diff --git a/eduaid_web/src/components/FormValidation/CharacterCounter.jsx b/eduaid_web/src/components/FormValidation/CharacterCounter.jsx
new file mode 100644
index 00000000..552be743
--- /dev/null
+++ b/eduaid_web/src/components/FormValidation/CharacterCounter.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const CharacterCounter = ({ text, maxLength = 2500 }) => {
+ const count = text?.length || 0;
+ const isNearLimit = count > maxLength * 0.8;
+ const isOverLimit = count > maxLength;
+
+ let textColor = "text-[#E4E4E4]";
+ if (isOverLimit) {
+ textColor = "text-red-500 font-bold";
+ } else if (isNearLimit) {
+ textColor = "text-yellow-500";
+ }
+
+ return (
+
+ {count} / {maxLength} characters
+ {isOverLimit && Exceeds model capacity}
+
+ );
+};
+
+export default CharacterCounter;
\ No newline at end of file
diff --git a/eduaid_web/src/pages/Text_Input.jsx b/eduaid_web/src/pages/Text_Input.jsx
index e341d331..84c34650 100644
--- a/eduaid_web/src/pages/Text_Input.jsx
+++ b/eduaid_web/src/pages/Text_Input.jsx
@@ -7,10 +7,13 @@ import { FaClipboard } from "react-icons/fa";
import Switch from "react-switch";
import { Link,useNavigate } from "react-router-dom";
import apiClient from "../utils/apiClient";
+import CharacterCounter from "../components/FormValidation/CharacterCounter";
+import { validateTextInput } from "../utils/validation";
const Text_Input = () => {
const navigate = useNavigate();
const [text, setText] = useState("");
+ const [validationError, setValidationError] = useState("");
const [difficulty, setDifficulty] = useState("Easy Difficulty");
const [numQuestions, setNumQuestions] = useState(10);
const [loading, setLoading] = useState(false);
@@ -62,7 +65,16 @@ const Text_Input = () => {
} finally {
setLoading(false);
}
- } else if (text) {
+ } else {
+ // Validate text input before proceeding
+ const validation = validateTextInput(text);
+ if (!validation.isValid) {
+ setValidationError(validation.error);
+ setLoading(false);
+ return;
+ }
+ setValidationError("");
+
// Proceed with existing functionality for local storage
localStorage.setItem("textContent", text);
localStorage.setItem("difficulty", difficulty);
@@ -178,6 +190,16 @@ const Text_Input = () => {
/>
+
+ {/* Character Counter */}
+
+
+ {validationError && (
+
+ {validationError}
+
+ )}
+
{/* Separator */}
or
@@ -247,9 +269,12 @@ const Text_Input = () => {
diff --git a/eduaid_web/src/utils/validation.js b/eduaid_web/src/utils/validation.js
new file mode 100644
index 00000000..7c6547c0
--- /dev/null
+++ b/eduaid_web/src/utils/validation.js
@@ -0,0 +1,15 @@
+export const validateTextInput = (text) => {
+ if (!text || text.trim().length === 0) {
+ return { isValid: false, error: "Please enter some text to generate questions." };
+ }
+
+ if (text.length < 50) {
+ return { isValid: false, error: "Text is too short. Please provide at least 50 characters." };
+ }
+
+ if (text.length > 2500) {
+ return { isValid: false, error: "Text exceeds the 2500 character limit. Please shorten your text." };
+ }
+
+ return { isValid: true, error: "" };
+};
\ No newline at end of file