Add readme

mrehanamjad · Apr 1, 2024 · 98f1432 · 98f1432
1 parent cebb198
commit 98f1432
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,23 @@
-# codingquizapp
-Coding Quiz App using HTML, Tailwind CSS and TypeScript
+## Coding Quiz Site
+
+**Challenge your coding skills with this interactive quiz!**
+
+This is a web-based coding quiz platform built using HTML, Tailwind CSS, and TypeScript. It offers a variety of coding challenges to test your knowledge and skills in different programming languages and concepts.
+
+**Live site: **
+
+## Features
+- Coding quizzes covering various programming topics.
+- User-friendly interface built with HTML and styled with Tailwind CSS.
+- Interactive features and functionalities powered by TypeScript.
+- Leaderboard to track scores of users.
+- Responsive design to ensure a seamless experience across different devices.
+
+## Technologies:
+
+- HTML
+- Tailwind CSS
+- TypeScript
+
+
+
diff --git a/dist/Questions.js b/dist/Questions.js
@@ -1,5 +1,4 @@
 "use strict";
-//for quiz data: https://www.inclu dehelp.com/mcq/web-technologies-mcqs.asp
 const htmlQ = [
     {
         question: "HTML stands for_______.",
@@ -365,15 +364,15 @@ const htmlQ = [
         explanation: "The correct HTML statement to display HelloHi! in a paragraph is/are: < p>< del>Hello< /del>< ins>Hi!< /ins>< /p> < p>< strike>Hello< /strike>< ins>Hi!< /ins>< /p>",
     },
     {
-        question: "Which is the correct HTML statement to display Hello CodeQuizOne in a paragraph?",
+        question: "Which is the correct HTML statement to display Hello codingquizz in a paragraph?",
         options: {
-            A: "< p>Hello < mark>CodeQuizOne< /mark>< /p>",
-            B: "< p>Hello< mark>CodeQuizOne< /mark>< /p>",
-            C: "< p>Hello < span>CodeQuizOne< /span>< /p>",
-            D: "< p>Hello< span>CodeQuizOne< /span>< /p>",
+            A: "< p>Hello < mark>codingquizz< /mark>< /p>",
+            B: "< p>Hello< mark>codingquizz< /mark>< /p>",
+            C: "< p>Hello < span>codingquizz< /span>< /p>",
+            D: "< p>Hello< span>codingquizz< /span>< /p>",
         },
         answer: "B",
-        explanation: "The correct HTML statement to display Hello CodeQuizOne in a paragraph is: < p>Hello< mark>CodeQuizOne< /mark>< /p>",
+        explanation: "The correct HTML statement to display Hello codingquizz in a paragraph is: < p>Hello< mark>codingquizz< /mark>< /p>",
     },
     {
         question: "Which HTML tag is used to define a short quotation?",
@@ -1711,7 +1710,7 @@ const cssQ = [
 ];
 const jsQ = [
     {
-        question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"CodeQuizOne\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
+        question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"codingquizz\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
         options: {
             A: "11",
             B: "12",
@@ -2149,7 +2148,7 @@ const jsQ = [
         explanation: "The length property is used to get the length of a string in JavaScript.",
     },
     {
-        question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"CodeQuizOne\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
+        question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"codingquizz\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
         options: {
             A: "11",
             B: "12",
@@ -2171,7 +2170,7 @@ const jsQ = [
         explanation: "The Single backslash (\\) is used to break up a code line within a text string in JavaScript.",
     },
     {
-        question: 'Will the following JavaScript code work?\n\n< script>\n\tdocument.getElementById("test").innerHTML = \\\n\t"Hello, CodeQuizOne!";\n< /script>',
+        question: 'Will the following JavaScript code work?\n\n< script>\n\tdocument.getElementById("test").innerHTML = \\\n\t"Hello, codingquizz!";\n< /script>',
         options: {
             A: "Yes",
             B: "No",
@@ -2184,15 +2183,15 @@ const jsQ = [
     {
         question: "Which is the correct JavaScript statement to define string as object?",
         options: {
-            A: 'var s = new String("CodeQuizOne!")',
-            B: 'var s = String("CodeQuizOne!")',
-            C: 'var s = "CodeQuizOne!"',
+            A: 'var s = new String("codingquizz!")',
+            B: 'var s = String("codingquizz!")',
+            C: 'var s = "codingquizz!"',
         },
         answer: "A",
-        explanation: 'The strings can also be defined as an object using the new keyword. The correct JavaScript statement to define a string as an object is: var s = new String("CodeQuizOne!")',
+        explanation: 'The strings can also be defined as an object using the new keyword. The correct JavaScript statement to define a string as an object is: var s = new String("codingquizz!")',
     },
     {
-        question: 'What will be the output of the following JavaScript code?\n <script>\n\tlet str1 = new String("CodeQuizOne!");\n\tlet str2 = new String("CodeQuizOne!");\n\tdocument.getElementById("test").innerHTML = (str1==str2);\n</script>',
+        question: 'What will be the output of the following JavaScript code?\n <script>\n\tlet str1 = new String("codingquizz!");\n\tlet str2 = new String("codingquizz!");\n\tdocument.getElementById("test").innerHTML = (str1==str2);\n</script>',
         options: {
             A: "true",
             B: "false",
@@ -2213,15 +2212,15 @@ const jsQ = [
         explanation: "The all of the above JavaScript methods can be used to extract string parts.",
     },
     {
-        question: 'What will be the output of the following JavaScript code?\n  <script>\n    let x = "Hello, CodeQuizOne!";\n    document.getElementById("test").innerHTML = x.slice(-13,-1);\n</script>',
+        question: 'What will be the output of the following JavaScript code?\n  <script>\n    let x = "Hello, codingquizz!";\n    document.getElementById("test").innerHTML = x.slice(-13,-1);\n</script>',
         options: {
-            A: "CodeQuizOne!",
-            B: "CodeQuizOne",
+            A: "codingquizz!",
+            B: "codingquizz",
             C: "ValueError",
             D: "Hello,",
         },
         answer: "B",
-        explanation: 'The negative value counts from the end of the string. Thus, the output will be "CodeQuizOne".',
+        explanation: 'The negative value counts from the end of the string. Thus, the output will be "codingquizz".',
     },
     {
         question: 'In JavaScript, the string template literals use ____ rather than the quotes ("") to define a string?',
@@ -3133,7 +3132,7 @@ const javaQ = [
             A: "Error",
             B: "include",
             C: "help",
-            D: "CodeQuizOne",
+            D: "codingquizz",
         },
         answer: "D",
         explanation: "The string here is a StringBuffer hence the contents can be edited which makes the append method work on it by adding 'help' to the end of the string.",

diff --git a/index.html b/index.html
@@ -7,15 +7,15 @@
   <link rel="shortcut icon" href="./images/logo1.png" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href="./ui/output.css" rel="stylesheet" />
-  <title>Code Quiz One</title>
+  <title>Coding Quiz App</title>
 </head>
 
 <body>
   <nav
     class="h-14 w-full flex items-center justify-between pl-2 sm:px-5 lg:justify-evenly bg-gradient-to-r from-violet-500 to-fuchsia-500 sticky top-0 z-50 drop-shadow-2xl">
     <div class="flex space-x-2">
       <img class="h-10" src="./images/logo1.png" alt="logo-" />
-      <h1 class="text-2xl font-bold text-white">CodeQuizOne</h1>
+      <h1 class="text-2xl font-bold text-white">CodingQuizApp</h1>
     </div>
     <ul class="hidden lg:flex space-x-10 text-lg font-semibold">
       <li class="hover:text-white"><a href="#hero-section">Home</a></li>

diff --git a/quiz.html b/quiz.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="shortcut icon" href="./images/logo1.png" type="image/x-icon">
   <link rel="stylesheet" href="./ui/output.css" />
-  <title>Code Quiz One</title>
+  <title>Coding Quiz App</title>
 </head>
 
 <body class="h-screen w-screen bg-gradient-to-r from-violet-500 to-fuchsia-500 relative">
@@ -15,7 +15,7 @@
       class="h-14 rounded-full shadow-xl cursor-pointer hover:shadow-black" /></a>
     <div class="flex space-x-2 mx-3 text-white">
       <img class="h-10" src="./images/logo1.png" alt="logo-" />
-      <h1 class="text-2xl font-bold">CodeQuizOne</h1>
+      <h1 class="text-2xl font-bold">CodingQuizApp</h1>
     </div>
   </nav>
 

diff --git a/src/Questions.ts b/src/Questions.ts
@@ -396,16 +396,16 @@ const htmlQ: Question[] = [
   },
   {
     question:
-      "Which is the correct HTML statement to display Hello CodeQuizOne in a paragraph?",
+      "Which is the correct HTML statement to display Hello codingquizz in a paragraph?",
     options: {
-      A: "< p>Hello < mark>CodeQuizOne< /mark>< /p>",
-      B: "< p>Hello< mark>CodeQuizOne< /mark>< /p>",
-      C: "< p>Hello < span>CodeQuizOne< /span>< /p>",
-      D: "< p>Hello< span>CodeQuizOne< /span>< /p>",
+      A: "< p>Hello < mark>codingquizz< /mark>< /p>",
+      B: "< p>Hello< mark>codingquizz< /mark>< /p>",
+      C: "< p>Hello < span>codingquizz< /span>< /p>",
+      D: "< p>Hello< span>codingquizz< /span>< /p>",
     },
     answer: "B",
     explanation:
-      "The correct HTML statement to display Hello CodeQuizOne in a paragraph is: < p>Hello< mark>CodeQuizOne< /mark>< /p>",
+      "The correct HTML statement to display Hello codingquizz in a paragraph is: < p>Hello< mark>codingquizz< /mark>< /p>",
   },
   {
     question: "Which HTML tag is used to define a short quotation?",
@@ -1882,7 +1882,7 @@ const cssQ: Question[] = [
 
 const jsQ: Question[] = [
   {
-    question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"CodeQuizOne\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
+    question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"codingquizz\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
     options: {
       A: "11",
       B: "12",
@@ -2368,7 +2368,7 @@ const jsQ: Question[] = [
       "The length property is used to get the length of a string in JavaScript.",
   },
   {
-    question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"CodeQuizOne\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
+    question: `What will be the output of the following JavaScript code?\n <script>\n\tlet str = \"codingquizz\";\n\tdocument.getElementById(\"test\").innerHTML = str.length;\n<\/script>`,
     options: {
       A: "11",
       B: "12",
@@ -2394,7 +2394,7 @@ const jsQ: Question[] = [
   },
   {
     question:
-      'Will the following JavaScript code work?\n\n< script>\n\tdocument.getElementById("test").innerHTML = \\\n\t"Hello, CodeQuizOne!";\n< /script>',
+      'Will the following JavaScript code work?\n\n< script>\n\tdocument.getElementById("test").innerHTML = \\\n\t"Hello, codingquizz!";\n< /script>',
     options: {
       A: "Yes",
       B: "No",
@@ -2409,17 +2409,17 @@ const jsQ: Question[] = [
     question:
       "Which is the correct JavaScript statement to define string as object?",
     options: {
-      A: 'var s = new String("CodeQuizOne!")',
-      B: 'var s = String("CodeQuizOne!")',
-      C: 'var s = "CodeQuizOne!"',
+      A: 'var s = new String("codingquizz!")',
+      B: 'var s = String("codingquizz!")',
+      C: 'var s = "codingquizz!"',
     },
     answer: "A",
     explanation:
-      'The strings can also be defined as an object using the new keyword. The correct JavaScript statement to define a string as an object is: var s = new String("CodeQuizOne!")',
+      'The strings can also be defined as an object using the new keyword. The correct JavaScript statement to define a string as an object is: var s = new String("codingquizz!")',
   },
   {
     question:
-      'What will be the output of the following JavaScript code?\n <script>\n\tlet str1 = new String("CodeQuizOne!");\n\tlet str2 = new String("CodeQuizOne!");\n\tdocument.getElementById("test").innerHTML = (str1==str2);\n</script>',
+      'What will be the output of the following JavaScript code?\n <script>\n\tlet str1 = new String("codingquizz!");\n\tlet str2 = new String("codingquizz!");\n\tdocument.getElementById("test").innerHTML = (str1==str2);\n</script>',
     options: {
       A: "true",
       B: "false",
@@ -2444,16 +2444,16 @@ const jsQ: Question[] = [
   },
   {
     question:
-      'What will be the output of the following JavaScript code?\n  <script>\n    let x = "Hello, CodeQuizOne!";\n    document.getElementById("test").innerHTML = x.slice(-13,-1);\n</script>',
+      'What will be the output of the following JavaScript code?\n  <script>\n    let x = "Hello, codingquizz!";\n    document.getElementById("test").innerHTML = x.slice(-13,-1);\n</script>',
     options: {
-      A: "CodeQuizOne!",
-      B: "CodeQuizOne",
+      A: "codingquizz!",
+      B: "codingquizz",
       C: "ValueError",
       D: "Hello,",
     },
     answer: "B",
     explanation:
-      'The negative value counts from the end of the string. Thus, the output will be "CodeQuizOne".',
+      'The negative value counts from the end of the string. Thus, the output will be "codingquizz".',
   },
   {
     question:
@@ -3469,7 +3469,7 @@ const javaQ: Question[] = [
       A: "Error",
       B: "include",
       C: "help",
-      D: "CodeQuizOne",
+      D: "codingquizz",
     },
     answer: "D",
     explanation: