diff --git a/app/routes/ai-quiz.tsx b/app/routes/ai-quiz.tsx index f36fbf2..dafbf8b 100644 --- a/app/routes/ai-quiz.tsx +++ b/app/routes/ai-quiz.tsx @@ -1,15 +1,137 @@ -import React, {useState} from "react"; +import React, { useEffect, useState } from 'react'; +import { Progress } from 'antd'; -export default function Index(){ - return( -
-
- -
-

Take an AI Generative Quiz

-

Convert any text into an interactive quiz session

+function letterCount() { + const element = document.getElementById('queryMessage') as HTMLInputElement | null; + if (element) { + const valueLength = element.value.length; + const lengthElement = document.getElementById('letterLength'); + if (lengthElement) { + lengthElement.innerHTML = valueLength.toString(); + } + console.log(valueLength); + } else { + console.error("Element with id 'queryMessage' not found."); + } +} + +export default function Index() { + const [percent, setPercent] = useState(0); + const [secondsLeft, setSecondsLeft] = useState(30); + + useEffect(() => { + const interval = setInterval(() => { + setPercent((prevPercent) => { + if (prevPercent >= 100) { + clearInterval(interval); + return 100; + } + return Math.round(prevPercent + (100 / 30)); // Round percentage + }); + + setSecondsLeft((prevSeconds) => { + if (prevSeconds <= 1) { + clearInterval(interval); + return 0; + } + return prevSeconds - 1; + }); + }, 1000); + + return () => clearInterval(interval); + }, []); + + return ( + <> +
+
+

✨

+
+

Take an AI Generative Quiz

+

Convert any text into an interactive quiz session

+
-
-
- ) -} \ No newline at end of file + + +
+
+
+ +

0/2000

+
+ +
+

Trending

+
+
+
+ +
+
+

Dr. Marie Montessori Life Journey

+

12 classmates have taken this quiz.

+
+
+
+
+ +
+
+

Montessori Methods

+

10 classmates have taken this quiz.

+
+
+
+
+ +
+
+

Practical Methods

+

12 classmates have taken this quiz.

+
+
+
+

Or try these

+
+
+ +
+
+ +
+
+ +
+
+

Difficulty

+
+ +
+
+ +
+
+
+
+ +

Generating Quiz

+

This usually takes {secondsLeft} seconds

+ +
+ +
+
+
+ + ); +} diff --git a/public/assets/button-icon.svg b/public/assets/button-icon.svg new file mode 100644 index 0000000..5563a56 --- /dev/null +++ b/public/assets/button-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/quiz-logo.svg b/public/assets/quiz-logo.svg new file mode 100644 index 0000000..744d51b --- /dev/null +++ b/public/assets/quiz-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/robot.png b/public/assets/robot.png new file mode 100644 index 0000000..f1d3f6c Binary files /dev/null and b/public/assets/robot.png differ