wizr-quiz 1.0.0

package/src/styles/quiz.css

@@ -0,0 +1,267 @@
+* {
+  box-sizing: border-box;
+}
+
+.quiz-page {
+  position: fixed;
+  background: white;
+  width: 100vw;
+  min-height: 100dvh;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  box-sizing: border-box;
+  overflow-y: auto; /* ensure scrolling works */
+  display: flex;
+  flex-direction: column;
+}
+
+.quiz-page-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  margin: 24px 16px 0px 16px;
+  height: 100%;
+  background: #f8f5f2; /* Same background color */
+}
+
+/* Ticker stays in a row on all devices */
+.quiz-ticker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 20px;
+  border-bottom: 1px solid #e1d8c9;
+}
+
+.quiz-ticker-right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  padding-right: 2rem;
+}
+
+.quiz-container {
+  flex-grow: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: row; /* side-by-side on desktop */
+  align-items: flex-start;
+  padding: 24px 56px 24px;
+  border-radius: 10px;
+  justify-content: space-between;
+  box-sizing: border-box;
+  max-width: 1600px;
+  margin: 0 auto;
+  max-height: 80dvh;
+  overflow: auto;
+  gap: 2rem;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+.quiz-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Left & Right columns on desktop */
+.quiz-left {
+  width: 100%;
+  max-width: 650px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #ccc transparent; /* thumb color, track color */
+}
+
+/* WebKit-based browsers (Chrome, Safari, Edge) */
+.quiz-left::-webkit-scrollbar {
+  width: 6px; /* slim scrollbar */
+}
+
+.quiz-left::-webkit-scrollbar-thumb {
+  background-color: #ccc; /* grey thumb */
+  border-radius: 4px;
+}
+
+.quiz-left::-webkit-scrollbar-track {
+  background: transparent; /* optional: transparent track */
+}
+
+.quiz-right {
+  max-width: 622px;
+  width: 100%;
+}
+
+.quiz-right-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.choose-option {
+  font-size: 1rem;
+  font-family: "Patron", sans-serif;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 0.2%;
+}
+
+.question-count {
+  font-size: 0.9rem;
+  font-family: "Patron", sans-serif;
+  color: #161c20;
+  font-weight: 500;
+  line-height: 1.2rem;
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  margin-top: 12px;
+}
+
+.mobile-next-btn {
+  display: none;
+}
+
+/* Button Styles */
+.prev-btn,
+.next-btn {
+  padding: 10px 54px;
+  background: #000000;
+  color: #ffffff;
+  border: none;
+  border-radius: 24px;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: 0.9rem;
+  font-weight: 500;
+  font-family: "Patron", sans-serif;
+  line-height: 21px;
+}
+
+.prev-btn {
+  background: #5d4037;
+}
+
+.next-btn:disabled {
+  background: #d7ccc8;
+  cursor: not-allowed;
+}
+
+.scroll-down-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 999;
+  border: none;
+  border-radius: 50%;
+  padding: 4px;
+  cursor: pointer;
+  font-size: 20px;
+  transition: background 0.3s;
+}
+
+.bounce {
+  animation: bounce 1.6s infinite;
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0px);
+  }
+  40% {
+    transform: translateY(-4px);
+  }
+  60% {
+    transform: translateY(-2px);
+  }
+}
+
+/* RESPONSIVE LAYOUT */
+@media (max-width: 768px) {
+  /* Stack quiz content vertically on mobile */
+
+  .quiz-page-container {
+    flex-direction: column;
+    padding: 16px;
+    gap: 1rem;
+    overflow-y: auto;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .quiz-container {
+    flex-direction: column;
+    padding: 0;
+    justify-content: space-between;
+  }
+
+  .quiz-ticker {
+    padding: 3px 20px;
+  }
+
+  .quiz-left {
+    max-height: none;
+    overflow: initial;
+  }
+
+  .quiz-ticker-right {
+    padding-right: 0px;
+  }
+
+  .choose-option {
+    font-size: 0.95rem;
+  }
+  /* Keep the ticker in a row at the top (no change) */
+
+  /* Fix the next button at the bottom on mobile */
+  .next-btn-container {
+    display: none;
+  }
+
+  .mobile-next-btn {
+    display: block;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    margin: 0 auto;
+    text-align: center;
+    z-index: 101;
+    width: 100%;
+    padding: 12px 0;
+    border-top: 1px solid #dddddd;
+    background: #f8f5f2; /* Same background color */
+  }
+
+  .next-btn {
+    padding: 12px 72px;
+  }
+
+  .question-count {
+    font-size: 0.95rem;
+  }
+  .option-btn {
+    font-size: 0.8rem;
+    padding: 10px;
+  }
+}
+
+@media (max-width: 768px) and (max-height: 800px) {
+  .quiz-container {
+    padding-bottom: 65px;
+  }
+}
+
+@media (max-width: 768px) and (max-height: 500px) {
+  .quiz-container {
+    padding-bottom: 100px;
+  }
+}

package/src/styles/quizEndScreen.css

@@ -0,0 +1,33 @@
+.end-screen-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #222;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* Content */
+.end-screen-content {
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: "Patron", sans-serif;
+}
+
+.end-screen-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+  font-family: "Patron", sans-serif;
+}

package/src/styles/tabSwitchModal.css

@@ -0,0 +1,78 @@
+/* Modal Background Overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* Modal Box */
+.modal-content {
+  background: #222;
+  color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  width: 400px;
+  text-align: center;
+  position: relative;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Close Button */
+.modal-close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+  font-family: "Patron", sans-serif;
+}
+
+/* Header */
+.modal-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 10px;
+  font-family: "Patron", sans-serif;
+}
+
+/* Warning Icon */
+.modal-icon {
+  font-size: 32px;
+  color: #ffcc00;
+}
+
+/* Text */
+.modal-text {
+  font-size: 14px;
+  color: #ccc;
+  margin-bottom: 20px;
+  font-family: "Patron", sans-serif;
+}
+
+/* Button */
+.modal-button {
+  background: #fff;
+  color: #222;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: 0.3s;
+  font-family: "Patron", sans-serif;
+}
+
+.modal-button:hover {
+  background: #ddd;
+}

package/src/styles/timer.css

@@ -0,0 +1,5 @@
+.timer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/svg.d.ts

@@ -0,0 +1,6 @@
+// svg.d.ts
+declare module "*.svg" {
+    const content: string;
+    export default content;
+  }
+  

package/src/types/index.ts

@@ -0,0 +1,60 @@
+export interface IQuizProps {
+  userId: string;
+  quizId: string;
+  tabSwitchLimit: number;
+  onQuizComplete: () => Promise<void>;
+  baseURL: string;
+  token: string;
+}
+
+export interface OptionsProps {
+  options: Option[];
+  selectedOption: string | null;
+  onSelect: (optionId: string) => void;
+  loading: boolean;
+}
+
+export interface QuestionProps {
+  question: string;
+}
+
+export interface QuizEndScreenProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export interface TabSwitchModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export interface TimerProps {
+  duration: number;
+  markQuizComplete: () => Promise<void>;
+  isEndScreenOpen: boolean;
+}
+
+export interface Option {
+  id: string;
+  text: string;
+  media: string[];
+  code: string | null;
+}
+
+export interface Question {
+  id: string;
+  text: string;
+  media: string[];
+  code: string | null;
+  type: "MCQ";
+  maxScore: number;
+  options: Option[];
+  conceptId: string;
+  level: "easy" | "medium" | "hard";
+}
+
+export interface QuizData {
+  questions: Question[];
+  duration: number;
+  id: string;
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}