app/components/question_component.tsx

@@ -33,9 +33,20 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
   return (
     <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
       <div className="text-center">
-        <h1 className="text-4xl font-bold tracking-tight text-gray-50">
-          {question && question.text}
-        </h1>
+          {/* {question && question.text} */}
+        <Transition
+            appear={true}
+            show={question ? true : false /* a bit hacky */}
+            enter="transition-opacity duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-90"
+            leave="transition-opacity duration-150"
+            leaveFrom="opacity-90"
+            leaveTo="opacity-0">
+          <h1 className="text-4xl font-bold tracking-tight text-gray-50">
+              {question.text}
+          </h1>
+        </Transition>
         <Transition
           show={(question && state.opened[ question.id ]) ? true : false}
           enter="transition-opacity duration-300"

app/learn/[category]/page.tsx

@@ -9,6 +9,16 @@ import { AnswerType, Question, getQuestions } from '@/app/lib/question';
 import QuestionView from '@/app/components/question_component';
 import ResultScreen from '@/app/components/results';
 
+const shuffle = (array: any[]) => {
+  let i = array.length - 1;
+
+  while ( i >= 0 ) {
+    const random_i = Math.floor( Math.random() * i );
+    
+    [array[ i ], array[ random_i ]] = [array[ random_i ], array[ i ]];
+    i--;
+  }
+}
 
 const Page = ({ params }: { params: { category: string }}) => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -35,6 +45,7 @@ const Page = ({ params }: { params: { category: string }}) => {
       result = result.filter( q => q.category === params.category)
       .map(it=>({...it, answered: AnswerType.Unset}));
       //result = result.filter
+      shuffle( result );
       setQuestions( result );
       console.log( `q12 uestions: ${ JSON.stringify( questions ) }`, result );
     }
@@ -44,6 +55,7 @@ const Page = ({ params }: { params: { category: string }}) => {
     questions?.forEach(q => {
       ans[ q.id ] = AnswerType.Unset;
     });
+
   
   /*  
     setState( (prevState: SessionState) => ({
@@ -83,7 +95,13 @@ const Page = ({ params }: { params: { category: string }}) => {
         </div>
         <div style={{paddingTop: '72px'}}></div>
         
-        {questions[ index ] ? (<QuestionView question={questions[ index ]} state = {state} setState={setState}/>) : <ResultScreen state={state}/>}
+        {(()=>{
+          if ( !questions[ 0 ] )
+            return <></>;
+          return (index < 10 && questions[ index ]) ? <QuestionView question={questions[ index ]} state = {state} setState={setState}/> : <ResultScreen state={state}/>;
+        })()}
+
+        {/* {questions[ 0 ] ? ((index < 10 && questions[ index ]) ? <QuestionView question={questions[ index ]} state = {state} setState={setState}/> : <ResultScreen state={state}/>) : null} */}
 
         <div
           className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"