hack2skill · ShubhamS168 · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/INFAMOUS/Earth and moon.blend b/INFAMOUS/Earth and moon.blend
diff --git a/INFAMOUS/Quiz/css/custom.css b/INFAMOUS/Quiz/css/custom.css
@@ -0,0 +1,58 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
+.main {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url(earth.jpg);
+    background-size: cover;
+
+}
+
+.container {
+    width: 35rem;
+    box-shadow: 0px 0px 5px grey;
+    display: flex;
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    flex-direction: column;
+}
+
+.col {
+    text-align: justify;
+    padding: 15px;
+    width: 95%;
+}
+
+#submit {
+    width: 100%;
+    background-color: rgb(47, 8, 73);
+    transition: 0.5s;
+    color: white;
+    outline: none;
+    border: none;
+    font-size: 25px;
+    display: block;
+    padding: 10px;
+    cursor: pointer;
+}
+
+#submit:hover {
+    background-color: rgb(34, 6, 53);
+}
+
+.box {
+    box-shadow: 0px -1px 1px grey;
+    width: 100%;
+}
diff --git a/INFAMOUS/Quiz/css/earth.jpg b/INFAMOUS/Quiz/css/earth.jpg
diff --git a/INFAMOUS/Quiz/index.html b/INFAMOUS/Quiz/index.html
@@ -0,0 +1,44 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/custom.css" />
+</head>
+
+<body>
+        <section class="main">
+
+            <div class="container">
+                <div class="col">
+                    <h3 id="questionBox">
+                        1) Lorem ipsum dolor sit amet, consectetur adipisicing elit Debitis?
+                    </h3>
+                </div>
+                <div class="col box">
+                    <input name="option" type="radio" id="first" value="a" required>
+                    <label for="first">Testing 1</label>
+                </div>
+                <div class="col box">
+                    <input name="option" type="radio" id="second" value="b" required>
+                    <label for="second">Testing 2</label>
+                </div>
+                <div class="col box">
+                    <input name="option" type="radio" id="third" value="c" required>
+                    <label for="third">Testing 3</label>
+                </div>
+                <div class="col box">
+                    <input name="option" type="radio" id="fourth" value="d" required>
+                    <label for="fourth">Testing 4</label>
+                </div>
+                <button id="submit">Submit</button>
+            </div>
+
+        </section>
+    <script src="js/app.js"></script>
+</body>
+
+</html>
diff --git a/INFAMOUS/Quiz/js/app.js b/INFAMOUS/Quiz/js/app.js
@@ -0,0 +1,112 @@
+const quizData = [{
+        question: "The water cycle is the continuous movement of water on, above, and below the Earth's surface. What is another term for the water cycle?",
+        a: "Hydrology",
+        b: "Hydraulics",
+        c: "Hydrogen",
+        d: "Hydrologic",
+        correct: "a",
+    },
+    {
+        question: "Aquifers are categorized as either unconfined or confined based on what characteristic?",
+        a: "Depth",
+        b: "Permeability",
+        c: "Pressure",
+        d: "Saturation",
+        correct: "c",
+    },
+    {
+        question: "In the water cycle, water evaporates from Earth's surface and rises into the atmosphere. What is this process called?",
+        a: "Precipitation",
+        b: "Infiltration",
+        c: "Evaporation",
+        d: "Condensation",
+        correct: "c",
+    },
+    {
+        question: "When water vapour in the atmosphere cools and changes back into liquid water or ice, it forms tiny water droplets or ice crystals. What is this process known as in the water cycle?",
+        a: "Transpiration",
+        b: "Evaporation",
+        c: "Condensation",
+        d: "Precipitation",
+        correct: "c",
+    },
+    {
+        question: "How does increased atmospheric CO2 contribute to climate change?",
+        a: "Causes global warming by trapping heatration",
+        b: "Leads to global cooling",
+        c: "Has no impact on climate",
+        d: "Influences magnetic fields",
+        correct: "a",
+    },
+    {
+        question: "What natural process removes CO2 from the atmosphere, mitigating climate change?",
+        a: "Fossil fuel combustion",
+        b: "Deforestation",
+        c: "Volcanic eruptions",
+        d: "Photosynthesis by plants and phytoplankton",
+        correct: "d",
+    }
+];
+let index = 0;
+let correct = 0,
+    incorrect = 0,
+    total = quizData.length;
+let questionBox = document.getElementById("questionBox");
+let allInputs = document.querySelectorAll("input[type='radio']")
+const loadQuestion = () => {
+    if (total === index) {
+        return quizEnd()
+    }
+    reset()
+    const data = quizData[index]
+    questionBox.innerHTML = `${index + 1}) ${data.question}`
+    allInputs[0].nextElementSibling.innerText = data.a
+    allInputs[1].nextElementSibling.innerText = data.b
+    allInputs[2].nextElementSibling.innerText = data.c
+    allInputs[3].nextElementSibling.innerText = data.d
+}
+
+document.querySelector("#submit").addEventListener(
+    "click",
+    function() {
+        const data = quizData[index]
+        const ans = getAnswer()
+        if (ans === data.correct) {
+            correct++;
+        } else {
+            incorrect++;
+        }
+        index++;
+        loadQuestion()
+    }
+)
+
+const getAnswer = () => {
+    let ans;
+    allInputs.forEach(
+        (inputEl) => {
+            if (inputEl.checked) {
+                ans = inputEl.value;
+            }
+        }
+    )
+    return ans;
+}
+
+const reset = () => {
+    allInputs.forEach(
+        (inputEl) => {
+            inputEl.checked = false;
+        }
+    )
+}
+
+const quizEnd = () => {
+    // console.log(document.getElementsByClassName("container"));
+    document.getElementsByClassName("container")[0].innerHTML = `
+        <div class="col">
+            <h3 class="w-100"> Hii, you've scored ${correct} / ${total} </h3>
+        </div>
+    `
+}
+loadQuestion(index);
diff --git a/INFAMOUS/The-Meeting-of-the-Waters-In-Manaus-Aerial.webp b/INFAMOUS/The-Meeting-of-the-Waters-In-Manaus-Aerial.webp
diff --git a/INFAMOUS/Types-of-water-of-bodies-2-0421.jpg b/INFAMOUS/Types-of-water-of-bodies-2-0421.jpg
diff --git a/INFAMOUS/first.html/Water-cycle.png b/INFAMOUS/first.html/Water-cycle.png
diff --git a/INFAMOUS/first.html/aquifers.jpg b/INFAMOUS/first.html/aquifers.jpg
diff --git a/INFAMOUS/first.html/download.jpeg b/INFAMOUS/first.html/download.jpeg
diff --git a/INFAMOUS/first.html/earth_landocean_16K.png b/INFAMOUS/first.html/earth_landocean_16K.png
diff --git a/INFAMOUS/first.html/first.html b/INFAMOUS/first.html/first.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz Entrance</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background-image: url('your-background-image.jpg'); /* Replace with your image file path */
+            background-size: cover;
+            background-position: center;
+            font-family: Arial, sans-serif;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
+        h1 {
+            font-size: 36px;
+            color: #fff;
+            text-align: center;
+        }
+
+        .picture-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 20px;
+        }
+
+        .picture {
+            width: 400px; /* Adjust the size as needed */
+            height: 400px; /* Adjust the size as needed */
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .picture img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .enter-button {
+            padding: 10px 20px;
+            background-color: #007BFF;
+            color: #fff;
+            border: none;
+            border-radius: 5px;
+            font-size: 18px;
+            cursor: pointer;
+        }
+
+        .enter-button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <h1>Welcome to the Quiz!</h1>
+
+    <div class="picture-grid">
+        <div class="picture">
+            <img src="aquifers.jpg" alt="Image 1"> <!-- Replace with your image file path -->
+        </div>
+        <div class="picture">
+            <img src="download.jpeg" alt="Image 2"> <!-- Replace with your image file path -->
+        </div>
+        <div class="picture">
+            <img src="Water-cycle.png" alt="Image 3"> <!-- Replace with your image file path -->
+        </div>
+        <div class="picture">
+            <img src="earth_landocean_16K.png" alt="Image 4"> <!-- Replace with your image file path -->
+        </div>
+    </div>
+
+    <button class="enter-button" onclick="enterQuiz()" link>
+        <a href="../Quiz/index.html" class="cta-button">Enter Quiz</a>
+
+    </button>
+
+    <script>
+        function enterQuiz() {
+            // Redirect to the quiz page or perform any other actions here
+            // You can use window.location.href to navigate to the quiz page.
+            // Example: window.location.href = 'quiz.html';
+        }
+    </script>
+</body>
+</html>
diff --git a/INFAMOUS/global_currents_456.gif b/INFAMOUS/global_currents_456.gif
diff --git a/INFAMOUS/shutterstock_1853507206-1-1.jpg b/INFAMOUS/shutterstock_1853507206-1-1.jpg
diff --git a/README.md b/README.md
@@ -15,18 +15,24 @@ To get started with the NASA Space Apps Noida Hackathon 2023 repository, follow
 
 ### README.md must consist of the following information:
 
-#### Team Name -
-#### Problem Statement - 
-#### Team Leader Email -
+#### Team Name - Taem Infamous
+#### Problem Statement - Everything starts with water
+#### Team Leader Email - [email protected]
 
 ### A Brief of the Prototype:
-  This section must include UML Diagrams and prototype description
+  we developed an interactive model to tell students the importance of water on our planet earth .
+We also developed and AR model of how moon's gravity affects earth's tides and  climate changes and its water cycles/.
+we developed a quiz in which students will see pictures related to the water cycle system and then attempt the quiz , and the result will be shown on the basis of the no. of correct answers.
 
 ### Tech Stack: 
-   List Down all technologies used to Build the prototype
+   HTML
+   CSS
+   Javascript
+   Blender
 
 ### Step-by-Step Code Execution Instructions:
-  This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed
+  First run the first.html then it will direct you to quiz interface.
 
 ### Future Scope:
-   Write about the scalability and futuristic aspects of the prototype developed
+   To fetch live data using nasa satellites and nasa daatseet about all the rivers, ocean and other water bodies present on earth.
+Main focus would be on the idea of fetching data about the garbage clusters in the water bodies and preventing the river or small lakes from dying or being cluttered.
diff --git a/WATER.zip b/WATER.zip