@@ -0,0 +1,91 @@
+body{
+    background-color: #f5f5f5;
+    font-family: 'Roboto', sans-serif;
+    color: #1d1d1f;
+}
+section nav{
+    background: #006ddb;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-radius: 0 0 14px 14px;
+}
+
+#quiz-title{
+    margin-bottom: 2px;
+    color: #fff;
+}
+
+#created-at{
+    font-size: 12px;
+    margin-bottom: 0;
+    color: #fff;
+    opacity: 0.6;
+}
+
+#btnGroupDrop1{
+    height: 30px;
+}
+
+.container-box{
+    width: 100%;
+    height: 85vh;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.box{
+    background-color: #fff;
+    border-radius: 28px;
+    border: 1px solid hsla(0,0%,51.4%,.16);
+    padding: 20px;
+    
+}
+
+#rules-box h3{
+    font-weight: 700;
+}
+
+#rules-box p{
+    font-weight: 450;
+}
+
+#question-box{
+    display: none;
+}
+
+.display-time{
+    display: contents;
+    font-weight: 450;
+}
+
+#question{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+
+.submit{
+    margin-top: 10px;
+    margin-right: 10px;
+}
+
+.next{
+    margin-top: 10px;
+}
+
+#radio-options{
+    width: 200px;
+}
+
+#radio-options div{
+    border-radius: 16px;
+    margin-bottom: 5px;
+}
+
+#radio-options div input{
+    margin-right: 5px;
+    margin-left: 5px;
+}
@@ -0,0 +1,31 @@
+body{
+    background-color: #f5f5f5;
+    font-family: 'Roboto', sans-serif;
+    color: #1d1d1f;
+}
+
+section{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+section div{
+    background-color: #fff;
+    border-radius: 28px;
+    border: 1px solid hsla(0,0%,51.4%,.16);
+    padding: 20px;
+    width: 200px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+section div h1{
+    display: contents;
+}
@@ -0,0 +1,30 @@
+body{
+    background-color: #f5f5f5;
+    font-family: 'Roboto', sans-serif;
+    color: #1d1d1f;
+}
+
+section{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+section div{
+    background-color: #fff;
+    border-radius: 28px;
+    border: 1px solid hsla(0,0%,51.4%,.16);
+    text-align: center;
+    padding: 20px;
+}
+
+section div h1{
+    margin-bottom: 20px;
+    font-weight: bold;
+}
+
+.select-quiz{
+    margin-right: 10px;
+}
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/styles.css">
+
+    <title>quiz app</title>
+</head>
+<body>
+    <section>
+        <div>
+            <h1>Select the quiz</h1>
+            <button class="select-quiz btn btn-dark" value="quizOne">Quiz 1</button>
+            <button class="select-quiz btn btn-primary" value="quizTwo">Quiz 2</button>
+            <button class="select-quiz btn btn-warning" value="quizThree">Quiz 3</button>
+        </div>
+    </section>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="javaScript/index.js"></script>
+</body>
+</html>
@@ -0,0 +1,11 @@
+let id = (id)=> document.getElementById(id);
+let classes = (classes)=> document.getElementsByClassName(classes);
+
+let quizSelected = classes("select-quiz");
+
+for(let i=0; i<quizSelected.length;i++){
+    quizSelected[i].addEventListener("click",()=>{
+        // redirecting to next page with parameter
+        window.location =  `quiz.html?quiz=${quizSelected[i].value}`
+    });
+} 
@@ -0,0 +1,185 @@
+let quizOne = {
+    "title": "General quizzes for testing purposes - part 1",
+    "data": [
+        {
+            "id": "af0153c2-9860-48f2-bfd2-641111d59214",
+            "question": "According to Greek mythology, who was the first woman on earth?",
+            "options": [
+                "Madona",
+                "Al Gore",
+                "Pandora",
+                "Eve"
+            ],
+            "answer": "UGFuZG9yYQ=="
+        },
+        {
+            "id": "17870cb8-12fb-447e-82ed-78c655e5dfd7",
+            "question": "In a bingo game, which number is represented by the phrase “two little ducks”?",
+            "options": [
+                "11",
+                "8",
+                "22",
+                "10"
+            ],
+            "answer": "MjI="
+        },
+        {
+            "id": "130f4b45-4925-4fa5-8ac2-9af6d59a330d",
+            "question": "In what year were the first Air Jordan sneakers released?",
+            "options": [
+                "1984",
+                "1983",
+                "1988"
+            ],
+            "answer": "MTk4NA=="
+        },
+        {
+            "id": "bb9413cd-9c7e-429a-b311-a717608b192b",
+            "question": "Which singer’s real name is Stefani Joanne Angelina Germanotta?",
+            "options": [
+                "Lady Gaga",
+                "Joanne Angel",
+                "Joanne Angelina"
+            ],
+            "answer": "TGFkeSBHYWdh"
+        },
+        {
+            "id": "d2652c20-bbba-4e50-b962-d32d77917f47",
+            "question": "Kingston, Zuma, and Apollo are the sons of which American female pop star?",
+            "options": [
+                "Gwen Stefani",
+                "Joanne Angel",
+                "A. A. Milne"
+            ],
+            "answer": "R3dlbiBTdGVmYW5p"
+        }
+    ],
+    "createdAt": "Mon, 24 Jan 2022 11:41:13 GMT",
+    "timePerQuestion": "30",
+    "totalTime": "120",
+    "type": "quiz"
+}
+
+let quizTwo = {
+    "title": "General quizzes for testing purposes - part 2",
+    "data": [
+        {
+            "id": "af0153c2-9860-48f2-bfd2-641111d59214",
+            "question": "Which Dutch artist painted “Girl with a Pearl Earring”?",
+            "options": [
+                "Madona",
+                "Vermeer",
+                "Pandora",
+                "Eve"
+            ],
+            "answer": "VmVybWVlcg=="
+        },
+        {
+            "id": "17870cb8-12fb-447e-82ed-78c655e5dfd7",
+            "question": "Which country consumes the most chocolate per capita?",
+            "options": [
+                "Switzerland",
+                "U.S",
+                "Netherlands",
+                "Africa"
+            ],
+            "answer": "U3dpdHplcmxhbmQ="
+        },
+        {
+            "id": "130f4b45-4925-4fa5-8ac2-9af6d59a330d",
+            "question": "Which two U.S. states don’t observe Daylight Saving Time?",
+            "options": [
+                "Arizona and Hawaii",
+                "Nevada and Hawaii",
+                "Arizona and New York"
+            ],
+            "answer": "QXJpem9uYSBhbmQgSGF3YWlp"
+        },
+        {
+            "id": "bb9413cd-9c7e-429a-b311-a717608b192b",
+            "question": "What is the loudest animal on Earth?",
+            "options": [
+                "The sperm whale",
+                "Blue whale",
+                "Mamooth"
+            ],
+            "answer": "VGhlIHNwZXJtIHdoYWxl"
+        },
+        {
+            "id": "d2652c20-bbba-4e50-b962-d32d77917f47",
+            "question": "What was the first toy to be advertised on television?",
+            "options": [
+                "Mr. Potato Head",
+                "Nightmare toys",
+                "A. A. Toys"
+            ],
+            "answer": "TXIuIFBvdGF0byBIZWFk"
+        }
+    ],
+    "createdAt": "Mon, 20 Jan 2022 11:41:13 GMT",
+    "timePerQuestion": "30",
+    "totalTime": "120",
+    "type": "quiz"
+}
+
+let quizThree = {
+    "title": "General quizzes for testing purposes - part 3",
+    "data": [
+        {
+            "id": "af0153c2-9860-48f2-bfd2-641111d59214",
+            "question": " In the United Kingdom, what is the day after Christmas known as?",
+            "options": [
+                "Boxing Day",
+                "Cricket Day",
+                "Wrestling Day",
+                "Hockey Day"
+            ],
+            "answer": "Qm94aW5nIERheQ=="
+        },
+        {
+            "id": "17870cb8-12fb-447e-82ed-78c655e5dfd7",
+            "question": "Which country consumes the most chocolate per capita?",
+            "options": [
+                "Switzerland",
+                "U.S",
+                "Netherlands",
+                "Africa"
+            ],
+            "answer": "U3dpdHplcmxhbmQ="
+        },
+        {
+            "id": "130f4b45-4925-4fa5-8ac2-9af6d59a330d",
+            "question": "Which of Shakespeare’s plays is the longest?",
+            "options": [
+                "Hamlet",
+                "Cutlet",
+                "Mamooth"
+            ],
+            "answer": "SGFtbGV0"
+        },
+        {
+            "id": "bb9413cd-9c7e-429a-b311-a717608b192b",
+            "question": "What is the loudest animal on Earth?",
+            "options": [
+                "The sperm whale",
+                "Blue whale",
+                "Mamooth"
+            ],
+            "answer": "VGhlIHNwZXJtIHdoYWxl"
+        },
+        {
+            "id": "d2652c20-bbba-4e50-b962-d32d77917f47",
+            "question": "I Know Why the Caged Bird Sings’ is an autobiography about the early years of what inspirational African-American writer and poet?",
+            "options": [
+                "Maya Angelou",
+                "Nightmarish",
+                "The Great Dane"
+            ],
+            "answer": "TWF5YSBBbmdlbG91"
+        }
+    ],
+    "createdAt": "Mon, 12 Jan 2022 11:41:13 GMT",
+    "timePerQuestion": "30",
+    "totalTime": "120",
+    "type": "quiz"
+}