initial changes for quiz exam

5d47f797 · Choudhary · c4a9ccea · 5d47f797 · 5d47f797 · 5d47f797
Commit 5d47f797 authored May 07, 2022 by Choudhary
Hide whitespace changes
Inline Side-by-side

Showing with 194 additions and 13 deletions

App.js src/App.js +30 -13

Section.jsx src/Components/Section.jsx +34 -0

mock.js src/MockData/mock.js +130 -0

No files found.
--- a/src/App.js
+++ b/src/App.js
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import './App.css';

-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <p>
-           Welcome to Playground!
-          </p>
-        </header>
-      </div>
-    );
-  }
+export const Section = ({type}) => {
+  const  [startJS, setStartJS] =useState(false);
+  const  [startReact, setStartReact] =useState(false);
+  const  [startTest, setStartTest] =useState(false);
+  return (
+    <div className="App">
+      <header className="App-header">
+        <p>
+          Welcome to Playground!
+        </p>
+      </header>
+      <body>
+          <div>
+            <div onClick={()=> {setStartJS(true),setStartReact(false),setStartTest(false)}}>
+              <h3>JS Quiz</h3>
+              {startJS && <Section type="javascript"/>}
+            </div>
+            <div onClick={()=> {setStartJS(false),setStartReact(true),setStartTest(false)}}>
+            <h3>React Quiz</h3>
+              {startReact && <Section type="react"/>}
+            </div>
+            <div onClick={()=> {setStartJS(false),setStartReact(false),setStartTest(true)}}>
+              <h3>Test Quiz</h3>
+              {startTest && <Section type="test"/>}
+            </div>
+          </div>
+      </body>
+    </div>
+  );
 }

 export default App;
--- a/src/Components/Section.jsx
+++ b/src/Components/Section.jsx
+import react from 'react';
+import {mockdata} from '../MockData/mock'
+
+
+export const Section = ({type}) => {
+
+  return (<>{type === 'javascript'?
+    <div>
+      {mockdata.javascriptQuiz.map((questions) => (<div>
+        {Object.keys(questions).map(question => (<><p>{questions.question}</p>
+        {Object.keys(questions[question]).map((opt) => (<div className="flex">
+          <input type="checkbox" value={questions.question.opt} />
+          <p>{opt}</p>
+        </div>))}</>))}
+      </div>))}
+    </div> : type === 'react' ? <div>{mockdata.reactQuiz.map((questions) => (<div>
+      {Object.keys(questions).map(question => (<><p>{questions.question}</p>
+      {Object.keys(questions[question]).map((opt) => (<div className="flex">
+        <input type="checkbox" value={questions.question.opt} />
+        <p>{opt}</p>
+      </div>))}</>))}
+    </div>))}
+    </div> : type === 'test' ? <div>
+    {mockdata.testQuiz.map((questions) => (<div>
+      {Object.keys(questions).map(question => (<><p>{questions.question}</p>
+      {Object.keys(questions[question]).map((opt) => (<div className="flex">
+        <input type="checkbox" value={questions.question[opt]} />
+        <p>{opt}</p>
+      </div>))}</>))}
+    </div>))}
+    </div> : null
+  }</>)
+}
\ No newline at end of file
--- a/src/MockData/mock.js
+++ b/src/MockData/mock.js
+
+export const mockdata = {
+  "javascriptQuiz": [
+    {
+    "question1": {
+      "option1" :true,
+      "option2" :true,
+      "option3" :true,
+      "option4" :false
+    }
+    },
+    {
+      "question2": {
+        "option1" :true,
+        "option2" :true,
+        "option3" :true,
+        "option4" :false
+      }
+      },
+      {
+        "question3": {
+          "option1" :true,
+          "option2" :true,
+          "option3" :true,
+          "option4" :false
+        }
+        },
+        {
+          "question4": {
+            "option1" :true,
+            "option2" :true,
+            "option3" :true,
+            "option4" :false
+          }
+          },
+          {
+            "question5": {
+              "option1" :true,
+              "option2" :true,
+              "option3" :true,
+              "option4" :false
+            }
+            }
+  ],
+  "reactQuiz": [
+    {
+    "question1": {
+      "option1" :true,
+      "option2" :true,
+      "option3" :true,
+      "option4" :false
+    }
+    },
+    {
+      "question2": {
+        "option1" :true,
+        "option2" :true,
+        "option3" :true,
+        "option4" :false
+      }
+      },
+      {
+        "question3": {
+          "option1" :true,
+          "option2" :true,
+          "option3" :true,
+          "option4" :false
+        }
+        },
+        {
+          "question4": {
+            "option1" :true,
+            "option2" :true,
+            "option3" :true,
+            "option4" :false
+          }
+          },
+          {
+            "question5": {
+              "option1" :true,
+              "option2" :true,
+              "option3" :true,
+              "option4" :false
+            }
+            }
+  ],
+  "testQuiz": [
+    {
+    "question1": {
+      "option1" :true,
+      "option2" :true,
+      "option3" :true,
+      "option4" :false
+    }
+    },
+    {
+      "question2": {
+        "option1" :true,
+        "option2" :true,
+        "option3" :true,
+        "option4" :false
+      }
+      },
+      {
+        "question3": {
+          "option1" :true,
+          "option2" :true,
+          "option3" :true,
+          "option4" :false
+        }
+        },
+        {
+          "question4": {
+            "option1" :true,
+            "option2" :true,
+            "option3" :true,
+            "option4" :false
+          }
+          },
+          {
+            "question5": {
+              "option1" :true,
+              "option2" :true,
+              "option3" :true,
+              "option4" :false
+            }
+            }
+  ]
+}
\ No newline at end of file