Mm 26 reward component

src/components/quiz/QuizPage.tsx

@@ -2,18 +2,47 @@ import React, { useState } from "react";
 import { QuizQuestions } from "./QuizQuestions";
 import { UserDetailsForm } from "./UserDetailsForm";
 import { questions } from "./questions";
+import { Reward } from "./Reward";
+import './QuizQuestions.scss';
+
+interface User {
+  name?: string;
+  displayPicUrl?: string;
+}
 
 export const QuizPage: React.FunctionComponent = () => {
   const [isUserLoggedIn, setIsUserLoggedIn] = useState(false);
-
+  const [score,setScore] = useState<number>(0);
+  const [isEndOfQuestions, setIsEndOfQuestions] = useState(false);
+  const [userDetails, setUserDetails] = useState<User>();
+
   if (isUserLoggedIn === false) {
     return (
       <UserDetailsForm
-        isUserLoggedIn={ isUserLoggedIn }
-        setIsUserLoggedIn={ setIsUserLoggedIn }
+        isUserLoggedIn={isUserLoggedIn}
+        setIsUserLoggedIn={setIsUserLoggedIn}
+        setUserDetails={setUserDetails}
+      />
+    );
+  } else if (!isEndOfQuestions) {  
+    return (
+      <QuizQuestions
+      questions={questions}
+      score={score}
+      setScore={setScore}
+      setIsEndOfQuestions={setIsEndOfQuestions}
       />
     );
   } else {
-    return <QuizQuestions questions={ questions } />;
-  }
+    console.log('rewards Component');   
+    return (
+    <Reward score={score} userDetails={userDetails} />
+    );
+} 
 };
+
+
+
+
+
+

src/components/quiz/QuizQuestions.scss

@@ -0,0 +1,47 @@
+@import "../../constants.scss";
+
+*{  box-sizing: border-box;
+  background-color:$secondary-light;
+}  
+
+h1{
+  color: black;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+  text-align: center;
+}
+h3{
+   color: black;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+  text-align: left;
+}
+p{
+  color: $primary;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 20px;
+  text-align: left;
+}
+img{
+  width:40%;
+  height:25%;
+}
+li{
+  list-style-type: upper-alpha;
+  padding:2px;
+}
+.select-answer{
+  background-color: $primary-light;
+  box-shadow: 0 15px 20px ;
+}
+.quiz-questions{
+    z-index: 3;
+    top: 20px;
+    text-align: left;
+    background:$secondary-light;
+    margin-left: 60px;
+}
+.next-question{
+    background-color: $primary-light;
+    box-shadow: 0 15px 20px ;
+}

src/components/quiz/QuizQuestions.tsx

@@ -1,18 +1,84 @@
-import React from "react";
+import React, { useState } from "react";
 import { Question } from "./questions";
-import { Reward } from "./Reward";
+import { UserDetailsForm } from "./UserDetailsForm";
 
 interface QuizQuestionsProps {
-  questions: Question[];
+   questions: Question[];
+   score: number;
+   setScore: (score: number) => void;
+   setIsEndOfQuestions: (isEndOfQuestions: boolean) => void;
 }
 
+
 export const QuizQuestions: React.FunctionComponent<QuizQuestionsProps> = ({
-  questions,
+  questions,score,setScore,setIsEndOfQuestions
 }) => {
-  return (
-    <div>
-      <h1>This is the Questions Component</h1>
-      <Reward />
-    </div>
-  );
+
+  const [activeQuestionIndex, setActiveQuestionIndex] = useState(0);
+  const activeQuestion = questions[activeQuestionIndex];
+  const [activeQuestionClicked, setActiveQuestionClicked] = useState(false);
+  const [message, setMessage] = useState("");
+
+  const selectAnswer = (answerIndex: number) => {
+    setActiveQuestionClicked(true);
+    if (answerIndex === activeQuestion.correctAnswerIndex) {
+      setScore(score + 1);
+      setMessage('Correct!!!')
+    } else{
+      setMessage('Incorrect!!!')
+    } 
+  }
+
+  const renderResult = () => {
+    if (activeQuestionClicked !== false) {
+      return (
+        <div className="quiz-questions">
+          <h3>{message}</h3>
+          <p>{activeQuestion.answerDetailsText}</p>
+          <button className="next-question" onClick={() => { moveToNextQuestion() }} >NextQuestion </button>
+        </div>
+      );
+    }
+  } 
+
+  const moveToNextQuestion = () => {    
+    setActiveQuestionClicked(false);
+    if (activeQuestionIndex < questions.length) {
+        setActiveQuestionIndex(activeQuestionIndex + 1);   
+    }
+  }
+
+  if (activeQuestionIndex < questions.length) {
+    return (
+      <div className="quiz-questions">
+        <h1>Quiz</h1>
+        <div>
+          <h3>Question {activeQuestionIndex + 1}</h3>
+          <p> {activeQuestion.questionText}</p>
+          <img src={activeQuestion.questionImageUrl} />
+        </div>
+
+        <ul>
+          {activeQuestion.answersText.map((answer: string, index: number) => {
+            return (
+              <li key={index}>
+                <button
+                  className="select-answer"
+                  onClick={() => {
+                    selectAnswer(index);
+                  }}
+                >
+                  {answer}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <div>{renderResult()}</div>
+      </div>
+    );
+  } else {
+    setIsEndOfQuestions(true);
+  }
 };

src/components/quiz/Reward.scss

@@ -0,0 +1,39 @@
+@import "../../constants.scss";
+*{
+  box-sizing: border-box;
+}
+.reward-for-user{
+  width:80%;
+  padding:75px 30px;
+  border: 2px $secondary;
+  margin-top:200px;
+  z-index: 3;
+  left: 20px;
+  background:$primary;
+  position: relative;
+}
+.user-image{
+  width:125px;
+  height:125px;
+  position: absolute;
+  top:12.5px;
+  left:20px;
+}
+.reward-card-print{
+  color: white;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+  position: absolute;
+  bottom: 10px;
+  left:200px;
+  background-color:$primary;
+}
+.user-name{
+  color: white;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 30px;
+  position: absolute;
+  top:30px;
+  left:200px;
+  background-color:$primary;
+}

src/components/quiz/Reward.tsx

@@ -1,9 +1,37 @@
 import React from "react";
+import './Reward.scss';
 
-export const Reward: React.FunctionComponent = () => {
+interface User {
+  name?: string;
+  displayPicUrl?: string;
+}
+interface RewardProps {
+  score: number;
+  userDetails: User;
+}
+
+export const Reward: React.FunctionComponent<RewardProps> = ({ score, userDetails }) => {
+  const renderMessage = () => {
+    if (score < 3) {
+      return <h3 className="reward-card-print">Maybe check the fun facts about mars? Your score is {score}</h3>;
+    }
+     if (score > 3 && score <= 6) {
+       return (
+         <h3 className="reward-card-print">Not Bad? Your score is {score}</h3>
+       );
+    }
+     if (score > 6 && score <= 8) {
+       return <h3 className="reward-card-print">Very good! Your score is {score}</h3>;
+    }
+    if (score > 8) {
+      return <h3 className="reward-card-print">Congratulations Martian ! Your score is : {score}</h3>;
+    }
+}
   return (
-    <div>
-      <h1>This is the Reward Component</h1>
+    <div className="reward-for-user">
+      <h2 className="user-name">{userDetails.name} </h2>
+      <img className="user-image" src={userDetails.displayPicUrl} alt="display picture" />
+      { renderMessage() }
     </div>
   );
 };

src/components/quiz/UserDetailsForm.scss

@@ -0,0 +1,24 @@
+@import "../../constants.scss";
+*{
+  box-sizing: border-box;
+  background-color:$secondary-light;
+}
+h2{
+  color: White;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+  text-align: center;
+}
+  .userDetails {
+    padding:150px;
+    z-index: 3;
+    top: 20px;
+    left: 20px;
+    text-align: left;
+    background:$secondary-light;
+    color:Black;
+  }
+  .submit-button{
+    background-color: $primary-light;
+    box-shadow: 0 15px 20px ;
+  }

src/components/quiz/UserDetailsForm.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import './UserDetailsForm.scss';
 
 interface User {
   name?: string;
@@ -8,32 +9,33 @@ interface User {
 interface UserDetailsFormProps {
   isUserLoggedIn: boolean;
   setIsUserLoggedIn: (isUserLoggedIn: boolean) => void;
+  setUserDetails: (setUserDetails: User) => void; 
 }
 
 export const UserDetailsForm: React.FunctionComponent<UserDetailsFormProps> = ({
   isUserLoggedIn,
-  setIsUserLoggedIn,
+  setIsUserLoggedIn,setUserDetails
 }) => {
-  const [userDetails, setUserDetails] = useState<User>();
+
 
   const onSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
     setIsUserLoggedIn(true);
   };
 
   return (
-    <div>
+    <div className="userDetails">
       <h2>Enter your details cadet!</h2>
 
       <form onSubmit={ onSubmit }>
         <div>
           <label htmlFor="user-details-form-name">
             Name:
-            <input
+            <input 
               id="user-details-form-name"
               type="text"
               onChange={(e) =>
-                setUserDetails({ ...userDetails, name: e.target.value })
+                setUserDetails({ name: e.target.value })
               }
             />
           </label>
@@ -47,7 +49,6 @@ export const UserDetailsForm: React.FunctionComponent<UserDetailsFormProps> = ({
               type="text"
               onChange={(e) =>
                 setUserDetails({
-                  ...userDetails,
                   displayPicUrl: e.target.value,
                 })
               }