Add Verse Key in Question/Answer Format Response

README.md

@@ -38,7 +38,10 @@ When the `options.value` is set to 1, it means the answer is correct, while when
 {
   "data": [
     {
-      "question": " قُلْ هُوَ ٱللَّهُ أَحَدٌ",
+      "question": {
+        "text": " قُلْ هُوَ ٱللَّهُ أَحَدٌ",
+        "verseKey": "112:1"
+      },
       "options": [
         {
           "text": "Al-Masad",

src/data/index.ts

@@ -61,6 +61,16 @@ export const getVerseTextById = (id: number) => {
   return find.text_uthmani;
 };
 
+export const getVerseKeyById = (id: number) => {
+  const find = getQuran().find((item) => item.id === id);
+
+  if (!find) {
+    throw new Error("Failed to find verse");
+  }
+
+  return find.verse_key;
+}
+
 const chapterNames = [
   "Al-Fatihah",
   "Al-Baqarah",

src/quiz/guessSurah.ts

@@ -3,6 +3,7 @@ import {
   getManyVerseIdBySurahId,
   getSurahBySurahId,
   getSurahByVerseId,
+  getVerseKeyById,
   getVerseTextById,
 } from "~/data";
 import { randomizeOptions } from "~/quiz/helpers";
@@ -48,7 +49,10 @@ const guessSurahBySurah = (props: GuessVerse) => {
     options = options.sort(() => 0.5 - Math.random()).slice(0, 3);
 
     return randomizeOptions({
-      question: getVerseTextById(questionVerseId),
+      question: {
+        text: getVerseTextById(questionVerseId),
+        verseKey: getVerseKeyById(questionVerseId),
+      },
       options: [
         ...options.map((option) => {
           return {
@@ -79,7 +83,10 @@ const guessSurahBySurah = (props: GuessVerse) => {
 };
 
 type CreateQuizOutput = {
-  question: string;
+  question: {
+    text: string;
+    verseKey: string;
+  };
   options: {
     text: string;
     value: number;

src/quiz/guessVerse.ts

@@ -4,6 +4,7 @@ import {
   getManyVerseIdBySurahId,
   getManyVerseIdByJuzId,
   getVerseTextById,
+  getVerseKeyById,
 } from "~/data";
 import {
   getIndexOfQuestionAnswerOptions,
@@ -126,17 +127,22 @@ const createGuessVerseQuiz = (props: CreateGuessVerseQuiz) => {
   const { questionVerseId, answerVerseId, optionsVerseId } = props;
 
   const result = {
-    question: getVerseTextById(questionVerseId),
+    question: {
+      text: getVerseTextById(questionVerseId),
+      verseKey: getVerseKeyById(questionVerseId),
+    },
     options: [
       ...optionsVerseId.map((option) => {
         return {
           text: getVerseTextById(option),
           value: 0,
+          verseKey: getVerseKeyById(option),
         };
       }),
       {
         text: getVerseTextById(answerVerseId),
         value: 1,
+        verseKey: getVerseKeyById(answerVerseId),
       },
     ],
   };

src/quiz/helpers.ts

@@ -42,10 +42,10 @@ export const getIndexOfQuestionAnswerOptions = (
 };
 
 export const randomizeOptions = (result: {
-  question: string;
+  question: { text: string; verseKey: string };
   options: { text: string; value: number }[];
 }): {
-  question: string;
+  question: { text: string; verseKey: string };
   options: { text: string; value: number }[];
 } => {
   const randomizedOptions = [...result.options];