changed the gitignore file, removed routing from RouteDef file, creat…

…ed entry component and changed css

.gitignore

@@ -8,9 +8,6 @@
 # testing
 /coverage
 
-# quiz data
-/src/plays/quizeo/src/data
-
 # production
 /build
 

src/common/routing/RouteDefs.jsx

@@ -4,27 +4,16 @@ import PlayList from "common/playlists/PlayList";
 import { getAllPlays } from "meta/play-meta-util";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import QuizeoHome from "plays/quizeo/src/pages/homePage/homePage.component";
-import MoviePage from "plays/quizeo/src/pages/moviePage/moviePage.component";
-import { Provider } from 'react-redux';
-import { store, persistor } from "plays/quizeo/src/redux/store";
-import { PersistGate } from 'redux-persist/integration/react';
-
-
 const RouteDefs = () => {
  const plays = getAllPlays();
 
  return (
  <BrowserRouter>
  <Header />
  <DefMeta />
- <Provider store = {store}>
- <PersistGate persistor={persistor}>
  <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/plays" element={<App />}>
- <Route exact path="/plays/quizeo" element={<QuizeoHome/>}/> 
- <Route exact path="/plays/quizeo/movie/:categoryId" element={<MoviePage/>}></Route>
  <Route index element={<PlayList />} />
  {plays.map((play, index) => (
  <Route
@@ -36,10 +25,7 @@ const RouteDefs = () => {
  </Route>
  <Route path="/ideas" element={<PlayIdeas />} />
  <Route path="/*" element={<PageNotFound />} />
-
  </Routes>
- </PersistGate>
- </Provider>
  <Footer />
  </BrowserRouter>
  );

src/plays/quizeo/src/Quizeo.jsx

@@ -1,23 +1,41 @@
 import { getPlayById } from 'meta/play-meta-util';
 import PlayHeader from 'common/playlists/PlayHeader';
+import { store,persistor } from './redux/store';
+import { useEffect } from 'react';
+import { setScore, setQuestionNo } from "./redux/questions/questions-action";
+import Directory from "./components/directory/directory.component";
+import Header from "./components/header/header.component";
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
 import './quizeo.css'
 
 function Quizeo(props) {
  // Do not remove the below lines. 
  // The following code is to fetch the current play from the URL
+
  const { id } = props;
  const play = getPlayById(id);
 
  // Your Code Start below.
-
+
+ useEffect(() =>{
+ store.dispatch(setScore());
+ store.dispatch(setQuestionNo());
+ })
  return (
  <>
  <div className="play-details">
  <PlayHeader play={play} />
- <div className="play-details-body">
+ <div className="play-details-body quizeo">
  {/* Your Code Starts Here */}
-
+ <Provider store = {store}>
+ <PersistGate persistor={persistor}>
+ <Header/>
+ <Directory/>
+ </PersistGate>
+ </Provider>
  {/* Your Code Ends Here */}
+
  </div>
  </div>
  </>

src/plays/quizeo/src/components/menu-item/menuItem.component.js

@@ -1,15 +1,28 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useCallback, useState } from "react";
+// import { useNavigate } from "react-router-dom";
+import MoviePage from "../../pages/moviePage/moviePage.component";
 
 import './menu-item.styles.css'
 
 const MenuItem = ({title, imageUrl, linkUrl}) => {
- const navigate = useNavigate()
+ const [isClicked, setIsClicked] = useState(false);
+
+ const handleClick = () =>{
+ setIsClicked(true);
+ }
+
+ const handleLocation = () => {
+ if(window.location.pathname === '/movie'){ 
+ <MoviePage categoryId={linkUrl}/>
+ }
+ }
+
  return ( 
  <div className="menu-item">
  <div className="image-container" style={{backgroundImage:`url(${imageUrl})`}}/>
  <div className="image-content"
- onClick={() => navigate(`${linkUrl}`)}>
+ onClick={handleClick}>
+ {isClicked ? {handleLocation}: null}
  <h1>{title}</h1>
  </div> 
  </div>

src/plays/quizeo/src/data/movie.data.jsx

@@ -0,0 +1,254 @@
+const movie_data = {
+ avengers : {
+ id: 1,
+ title : "Avengers",
+ total : 5,
+ questions:[
+ {
+ id:1,
+ question:"How many rings does Captain America's shield have?",
+ options:{
+ "a": 3,
+ "b": 2,
+ "c": 4,
+ "d": 5
+ },
+ answer : 2
+ },
+ {
+ id:2,
+ question:"Who was the last holder of the Space Stone before Thanos claims it for his Infinity Gauntlet?",
+ options:{
+ "a": "Thor",
+ "b": "Loki",
+ "c": "The Collector",
+ "d": "Tony stark"
+ },
+ answer : "Loki"
+ },
+ {
+ id:3,
+ question:"What is the real name of the Black Panther?",
+ options:{
+ "a":"T'Challa",
+ "b": "M'Baku",
+ "c": "N'Jadaka",
+ "d": "N'Jobu"
+ },
+ answer : "T'Challa"
+ },
+ {
+ id:4,
+ question:"Who is killed by Loki in the Avengers?",
+ options:{
+ "a": "Maria Hill",
+ "b": "Nick Fury",
+ "c": "Agent Coulson",
+ "d": "Doctor Erik Selvig"
+ },
+ answer : "Agent Coulson"
+ },
+ {
+ id:5,
+ question:"What is the name of Thor’s hammer?",
+ options:{
+ "a": "Vanir",
+ "b": "Mjolnir",
+ "c": "Aesir",
+ "d": "Norn"
+ },
+ answer : "Mjolnir"
+ }
+ ]
+ },
+ moneyheist :{
+ id: 2,
+ title : "Money Heist",
+ total : 5,
+ questions:[
+
+ {
+ id:1,
+ question:" How long did the professor take to prepare for the robbery?",
+ options:{
+ "a": "months",
+ "b": "weeks",
+ "c": "days",
+ "d": "years"
+ },
+ answer : "years"
+ },
+ {
+ id:2,
+ question:"How many people did the professor recruit to help him carry out his plan?",
+ options:{
+ "a": "seven",
+ "b": "six",
+ "c": "eight",
+ "d": "nine"
+ },
+ answer : "eight"
+ },
+ {
+ id:3,
+ question:"In which country does Raquel track the Professor after the first heist?",
+ options:{
+ "a": "Philippines",
+ "b": "Thailand",
+ "c": "Portugal",
+ "d": "Clark"
+ },
+ answer : "Philippines"
+ },
+ {
+ id:4,
+ question:"The whole idea and plan of the heist was whose?",
+ options:{
+ "a": "The professor's father",
+ "b": "Berlin",
+ "c": "Professor",
+ "d": "Palermo"
+ },
+ answer : "The professor's father"
+ },
+ {
+ id:5,
+ question:"How much money were the Robbers able to print?",
+ options:{
+ "a": "976 million Euros",
+ "b": "956 million Euros",
+ "c": "967 million Euros",
+ "d": "984 million Euros"
+ },
+ answer : "984 million Euros"
+ }
+
+ ]
+ },
+ friends:{
+ id:3,
+ title: "Friends",
+ total : 5,
+ questions:[
+ {
+ id:1,
+ question:"How many sisters does Joey have?",
+ options:{
+ "a": 3,
+ "b": 2,
+ "c": 4,
+ "d": 7
+ },
+ answer : 7
+ },
+ {
+ id:2,
+ question:"What is the name of Joey’s character in the commercial for opening milk cartons?",
+ options:{
+ "a": "Mak",
+ "b": "Mark",
+ "c": "Kevin",
+ "d": "Drake"
+ },
+ answer : "Kevin"
+ },
+ {
+ id:3,
+ question:"What is the name of Joey’s acting agent?",
+ options:{
+ "a": "Andrea",
+ "b": "Estelle",
+ "c": "Martha",
+ "d": "Carole"
+ },
+ answer : "Estelle"
+ },
+ {
+ id:4,
+ question:"Phoebe has a twin sister. What's her name?",
+ options:{
+ "a": "Ursula",
+ "b": "Scalet",
+ "c": "Sharon",
+ "d": "Rita"
+ },
+ answer : "Ursula"
+ },
+ {
+ id:5,
+ question:"Who's wearing this turkey on their head?",
+ options:{
+ "a": "Pheobe",
+ "b": "Joey",
+ "c": "Monica",
+ "d": "Chandler"
+ },
+ answer : "Monica"
+ }
+ ]
+ },
+ squidgame:{
+ id:4,
+ title: "Squid game",
+ total : 5,
+ questions:[
+ {
+ id:1,
+ question:"How many contestants show up to play Squid Game?",
+ options:{
+ "a": 453,
+ "b": 456,
+ "c": 458,
+ "d": 452
+ },
+ answer : 456
+ },
+ {
+ id:2,
+ question:"What shape did the old man carve in the Honeycomb challenge?",
+ options:{
+ "a": "triangle",
+ "b": "circle",
+ "c": "star",
+ "d": "umbrella"
+ },
+ answer : "star"
+ },
+ {
+ id:3,
+ question:"Who was Hwang Jun-ho looking for?",
+ options:{
+ "a": "His younger brother",
+ "b": "His mother",
+ "c": "His father",
+ "d": "His older brother"
+ },
+ answer : "His older brother"
+ },
+ {
+ id:4,
+ question:"How many games are in the competition?",
+ options:{
+ "a": 6,
+ "b": 7,
+ "c": 8,
+ "d": 5
+ },
+ answer : 6
+ },
+ {
+ id:5,
+ question:"Why did Gi-Hun give his daughter a gift?",
+ options:{
+ "a": "It was her birthday",
+ "b": "It was christmas",
+ "c": "It was New Year",
+ "d": "It was a festival"
+ },
+ answer : "It was her birthday"
+ }
+ ]
+ }
+}
+
+export default movie_data;