updated list question

mtech-31-quemistry · Jul 29, 2024 · 86353b2 · 86353b2
1 parent 6ffc4a3
commit 86353b2
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git a/app/(main)/questions/searchlist/page.tsx b/app/(main)/questions/searchlist/page.tsx
@@ -5,8 +5,9 @@ import { DataScroller } from 'primereact/datascroller';
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { Toolbar } from 'primereact/toolbar';
-
 import { Tag } from 'primereact/tag';
+import { Editor } from "primereact/editor";
+import './searchlist.css'; // Custom styles
 
 const QuestioSearchList = () => {
     const [MCQ, setMCQ] = useState<Questions.MCQ[]>([]);
@@ -51,7 +52,8 @@ const QuestioSearchList = () => {
         return (
         <div className='card mb-1'>
             <div className="grid" key={rowData.id}>
-                    <div className="col-12">{rowData.stem}</div>
+                    {/* <div className="col-12">{rowData.stem}</div>  */}
+                    <div className="col-12" style={{margin:0,padding:0}}><Editor value={rowData.stem} showHeader={false} readOnly style={{border:0 }}/></div>
                     <div className="col-12 md:col-6"><label>Topics: </label>{topics}</div>
                     <div className="col-12 md:col-6"><label>Skills: </label>{skills}</div>
                     <div className="col-12 md:col-3"><label>Status: </label>{rowData.status}</div>

diff --git a/app/(main)/questions/searchlist/searchlist.css b/app/(main)/questions/searchlist/searchlist.css
@@ -0,0 +1,21 @@
+/* General targeting for PrimeReact Editor */
+.p-editor-container .p-editor-content {
+    /* width: 100%;
+    display: block; */
+    border: 0px solid black;
+    padding: 0 0 0 0 !important;
+    margin: 0 0 0 !important;
+    font-size: 1em !important; /* Custom font size */
+    line-height: 1.5 !important; /* Custom line spacing */
+    padding-left: 0 !important; /* Remove left padding */
+    margin-left: 0 !important;  /* Remove left margin */
+}
+
+/* Additional styling if needed */
+.p-editor-container .p-editor-content p {
+    border: 0px solid black;
+    margin: 0 0 0 0 !important; /* Adjust paragraph spacing */
+    padding: 0 0 0 0 !important;
+    padding-left: 0 !important; /* Remove left padding */
+    margin-left: 0 !important;  /* Remove left margin */
+}
diff --git a/public/demo/data/questions.json b/public/demo/data/questions.json
@@ -1,8 +1,8 @@
 {
-    "data": [
+    "mcqs": [
         {
             "id": 1000, 
-            "stem": "In which of the following do all three compounds have giant lattice structure?",                
+            "stem": "<p>In which of the following do all three compounds have giant lattice structure?</p>",                
             "options": [
                 {
                     "no": 1,

diff --git a/service/QuestionsService.tsx b/service/QuestionsService.tsx
@@ -52,6 +52,22 @@ export const QuestionsService = {
                 return data.mcqs as Questions.MCQ[]}
             );
     },
+    // for LOCAL dev
+    // retrieveMCQ(data : Questions.RetrieveQuestionRequest) {
+    //     console.log("retrieving mock data mcq")
+    //     return fetch('/demo/data/questions.json', { 
+    //             headers: { 
+    //                 'Content-Type': 'application/json' 
+    //             }})
+    //         .then((res) => {
+    //             let json = res.json();
+    //             console.log("json", json);
+    //             return json;
+    //         })
+    //         .then((data) => {
+    //             return data.mcqs as Questions.MCQ[]}
+    //         );
+    // },
     getTopics() {
         return fetch('/demo/data/topics.json', { headers: { 'Cache-Control': 'no-cache' } })
             .then((res) => res.json())