Mejoras de diseño y usabilidad a la hora de mostrar los resultados

Author: sergio-jr-dev

src/App.css

@@ -14,6 +14,10 @@
   margin: 0;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -26,6 +30,12 @@ body {
   );
 }
 
+#root {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-rows: max-content 1fr max-content;
+}
+
 .container {
   width: min(700px, 100%);
   margin-inline: auto;
@@ -34,8 +44,7 @@ body {
 
 h1 {
   text-align: center;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
+  margin-block: 2rem;
   font-size: clamp(2.5rem, calc(2rem + 1.333vw), 3rem);
   text-shadow: 2px 2px 3px var(--info-color);
   display: flex;

src/components/finalView/FinalView.jsx

@@ -13,9 +13,13 @@ export const FinalView = () => {
     <>
       <article className="quiz final-view">
         <Score />
-        <Dots />
       </article>
-      {showResults && <Results />}
+      {showResults && (
+        <>
+          <Results />
+          <Dots />
+        </>
+      )}
     </>
   );
 };

src/components/finalView/dots/Dots.jsx

@@ -9,14 +9,15 @@ export const Dots = () => {
   return (
     <div className="dots">
       {shuffleQuestions.map(({ id, correctAnswer }, i) => (
-        <span
+        <a
           key={id}
+          href={`#question-${i + 1}`}
           className={`dot ${
             correctAnswer === userAnswers[i] ? 'correct' : 'incorrect'
           }`}
         >
           {i + 1}
-        </span>
+        </a>
       ))}
     </div>
   );

src/components/finalView/dots/dots.css

@@ -1,16 +1,30 @@
 .dots {
+  background-color: #16074ebb;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 6px var(--text-color);
+  border: 2px solid var(--text-color);
+  border-radius: 1rem;
+  padding: 0.75rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.6rem;
+  position: fixed;
+  bottom: 65px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  width: min(100%, 500px);
+  margin-inline: auto;
 
   .dot {
     display: grid;
     place-items: center;
-    width: 1.5rem;
+    width: 1.7rem;
     aspect-ratio: 1;
     border-radius: 50%;
-    font-size: 0.8rem;
+    text-decoration: none;
+    color: white;
 
     &.correct {
       background-color: var(--correct-color);

src/components/finalView/results/Results.jsx

@@ -1,15 +1,28 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { marked } from 'marked';
 import { QuizContext } from '../../../context/QuizContext';
 
 import './results.css';
 
 export const Results = () => {
   const { shuffleQuestions, userAnswers } = useContext(QuizContext);
+  const firstQuestionRef = useRef(null);
+
+  useEffect(() => {
+    if (firstQuestionRef.current) {
+      firstQuestionRef.current.scrollIntoView();
+    }
+  }, []);
+
   return (
     <section className="results">
       {shuffleQuestions.map((question, i) => (
-        <article className="quiz" key={question.id}>
+        <article
+          className="quiz"
+          key={question.id}
+          id={`question-${i + 1}`}
+          ref={i === 0 ? firstQuestionRef : null}
+        >
           <h3>Pregunta {i + 1}</h3>
           <p>{question.question}</p>
           <div className="answers">

src/components/finalView/results/results.css

@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
+  margin-block-end: 7rem;
 }

src/components/finalView/score/Score.jsx

@@ -4,8 +4,13 @@ import { QuizContext } from '../../../context/QuizContext';
 import './score.css';
 
 export const Score = () => {
-  const { score, shuffleQuestions, handleRestart, setShowResults } =
-    useContext(QuizContext);
+  const {
+    score,
+    shuffleQuestions,
+    handleRestart,
+    setShowResults,
+    showResults,
+  } = useContext(QuizContext);
 
   const percentage = (score / shuffleQuestions.length) * 100;
   const message =
@@ -22,7 +27,12 @@ export const Score = () => {
         {shuffleQuestions.length}, consiguiendo un porcentaje de acierto de (
         {percentage.toFixed()}%).
       </p>
-      <button onClick={() => setShowResults(true)}>Ver resultados</button>
+      <button
+        onClick={() => setShowResults(true)}
+        hidden={showResults === true}
+      >
+        Ver resultados
+      </button>
       <button onClick={handleRestart}>Jugar de nuevo</button>
     </section>
   );

src/components/quiz/answer/Answer.jsx

@@ -19,7 +19,9 @@ export const Answer = ({ option }) => {
       className={`
         answer 
         ${correctAnswer ? 'correct' : ''}
-        ${incorrectAnswer ? 'incorrect' : ''}`}
+        ${incorrectAnswer ? 'incorrect' : ''}
+        ${selectedOption === null ? 'cursor' : ''}
+      `}
     >
       <input
         type="radio"

src/components/quiz/answer/answer.css

@@ -16,6 +16,10 @@
     animation: vibrate 0.3s ease-in-out;
   }
 
+  &.cursor {
+    cursor: pointer;
+  }
+
   input {
     accent-color: var(--secondary-color);
   }

src/components/quiz/quiz.css

@@ -1,7 +1,7 @@
 .quiz {
   background-color: var(--primary-color);
   border-radius: 16px;
-  padding: 3rem 1.5rem;
+  padding: 2rem 1.5rem;
   box-shadow: 2px 2px 3px var(--secondary-color);
   display: flex;
   flex-direction: column;