Split exercises into sections

docs/.vitepress/config.ts

@@ -47,7 +47,11 @@ export default defineConfig({
       },
       {
         text: "Exercises",
-        items: [{ text: "Next steps", link: "/exercises/next-steps" }],
+        items: [
+          { text: "Learn QGIS", link: "/exercises/learn-qgis" },
+          { text: "QGIS Basics", link: "/exercises/qgis-basics" },
+          { text: "Vector to Raster", link: "/exercises/vector-raster" },
+        ],
       },
     ],
     footer: {

docs/.vitepress/theme/index.js

@@ -18,6 +18,7 @@ import MisleadingTheme from "../../components/mapping/MisleadingTheme.vue";
 import ContentFigure from "../../components/ui/ContentFigure.vue";
 import Sources from "../../components/ui/Sources.vue";
 import Quiz from "../../components/ui/Quiz.vue";
+import Stepper from "../../components/ui/Stepper.vue";
 
 // Layout
 import MyLayout from "./MyLayout.vue";
@@ -42,5 +43,6 @@ export default {
     app.component("ContentFigure", ContentFigure);
     app.component("Quiz", Quiz);
     app.component("Sources", Sources);
+    app.component("Stepper", Stepper);
   },
 };

docs/components/ui/Stepper.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineProps({
+  steps: {
+    type: Array,
+    required: true,
+    // Example:
+    // [
+    //   { heading: 'Add info', content: 'Step 1 content' },
+    //   { heading: 'Add data', content: 'Step 2 content' },
+    // ]
+  },
+  currentStep: {
+    type: Number,
+    default: 1
+  }
+});
+</script>
+
+<template>
+  <calcite-stepper numbered layout="vertical">
+    <calcite-stepper-item
+      v-for="(step, index) in steps"
+      :key="index"
+      :heading="step.heading"
+      :selected="currentStep === index + 1"
+    >
+      <calcite-notice width="full" open>
+        <div slot="title" v-html="step.content"></div>
+      </calcite-notice>
+    </calcite-stepper-item>
+  </calcite-stepper>
+</template>
+
+<style scoped>
+calcite-stepper {
+  display: block;
+  margin: 1rem auto;
+  max-width: 600px;
+}
+</style>

docs/exercises/learn-qgis.md

@@ -0,0 +1,41 @@
+---
+title: Learn QGIS
+description: Learn how to download and use QGIS, a powerful open-source GIS software. Discover step-by-step instructions for installing QGIS, finding reliable geospatial data sources, and enhancing your mapping skills. Perfect for beginners and those looking to advance their GIS knowledge. 
+authors:
+  - name: Nick Sandburg
+    url: https://www.linkedin.com/in/nicksandburg/
+date: 2025-10-02
+---
+
+# Learn QGIS
+
+Now that you've soaked up all the foundational knowledge from this site, the next step is to go deeper by learning how to use [QGIS](https://qgis.org/). 
+QGIS is a free and open-source Geographic Information System (GIS) desktop software that enables you to create, analyze, and print maps.
+In the exercises, we'll put what you've learned into practice by working on making our own maps!
+
+## Download QGIS
+
+To download QGIS, start by going to https://qgis.org/download/. 
+You may donate or skip the donation page.
+Next, download the installer for your operating system and choose the Long Term Release (LTR) for stability. 
+Run the installer and accept the default settings.
+
+## Collect data for your map
+
+Now that we have QGIS installed, you'll need some data to work with.
+Finding good sources for geospatial data is crucial for creating accurate and informative maps.
+We don't want to have [misleading maps](/lessons/misleading).
+
+Below is a small collection of websites where you can find geospatial data to use in QGIS for your maps.
+
+The United States and Canada both have open data portals that provide access to a wide range of datasets, including geographic data. Here are some examples:
+- [NYC Open Data](https://opendata.cityofnewyork.us/)
+- [City of San Diego Open Data Portal](https://data.sandiego.gov/) 
+- [Canada Open Government Portal](https://search.open.canada.ca/data/)
+- [City of Victoria Open Data Portal](https://opendata.victoria.ca/)
+
+You may also search for "[Your Country/City] Open Data Portal" to find more data sources.
+
+There are also crowd sourced data sources like [iNaturalist](https://www.inaturalist.org/) that can be used for mapping species observations.
+
+The next section will guide you through some exercises to get you started with QGIS and some example data.

docs/exercises/qgis-basics.md

@@ -0,0 +1,166 @@
+---
+title: QGIS basics
+description: In this section we will be learning basic tasks in QGIS using vector data.
+authors:
+  - name: Nick Sandburg
+    url: https://www.linkedin.com/in/nicksandburg/
+date: 2025-10-02
+---
+
+# QGIS Basics
+
+In this exercise you will create a new QGIS project, add a San Diego drinking water contaminants GeoJSON layer, navigate the map (pan and zoom), install and use the [QuickMapServices plugin](https://plugins.qgis.org/plugins/quick_map_services/) to add a basemap, set the project CRS to EPSG:3857, adjust layer symbology, and review concepts (choropleth and vector data) with a short quiz.
+
+## Creating a new project
+
+Open QGIS and left click twice on "**New Empty Project**" under "**Project Templates**."
+You can also click on "**Project**" in the top left and select "**New**."
+Create a folder somewhere on your computer to store this exercise.
+This folder will be referred to as "**your exercise folder**."
+This folder will store the data downloads as well as your overall QGIS project.
+
+## What data are we using?
+
+Lets say you are working for the City of San Diego's public health department.
+You have been asked to identify areas where drinking water contaminants are higher compared to the rest of the city.
+We can map this data in QGIS and then even style the data in different ways.
+We are going to style this data by changing the color of each area to be lighter or darker depending on the percentile of contaminants found in drinking water.
+
+What type of map this is?
+This is a **choropleth map** because we are using shaded areas to represent our (drinking water contaminants by percentile) data.
+You can also refer back to [types of maps](/lessons/map-types#types-of-thematic-maps).
+
+## Downloading vector data
+
+Lets start by creating a map using vector data from the [City of San Diego Open Data Portal](https://opendata.sandag.org/).
+You can either find the exact download file inside of the "**exercise_files**" folder of this website or you can click [this link](https://opendata.sandag.org/Sustainable-Development-Goals/SDG-Indicator-6-3-2-Map-Drinking-Water/ig5f-77ey).
+
+Another option is to follow the instructions below to find the download through the website.
+In the search for data bar type: "**water san diego 6.3.2**."
+On the left side under "**View Types**" select "**Maps**."
+Click on "**SDG Indicator 6.3.2 Map - Drinking Water**."
+Click "**Export**" in the top right and for the Export Format select "**GeoJSON**."
+Recall when we learned about the common vector data formats in the lesson: [Spatial data and its types](/lessons/spatial-data#types-of-spatial-data).
+
+After downloading the file, open up another file window, and go to where your exercise folder is. 
+Drag the download into your exercise folder.
+
+## Adding a vector layer in QGIS
+
+Go back to QGIS and find your file on the left side.
+This file should now have the GeoJSON file inside of it.
+Hold left click and drag the GeoJSON file and release it when under the **Layers** section just below.
+You can also right click the GeoJSON file and select "**Add Layer to Project**." You should now see something like this:
+
+<ContentFigure 
+   :imgSrc="'/exercise_files/images/pic1.png'"
+   :style="{'width': '275px' }"
+/>
+
+## Navigating QGIS
+
+By default, you should already have "**Pan Map**" selected.
+This is the hand icon towards the top of the screen.
+In this mode you can hold left click, and move around to see different parts of the map.
+Refer to the picture below:
+
+<ContentFigure 
+   :imgSrc="'/exercise_files/images/pic4.png'"
+   :description="'Pan Map icon'"
+   :style="{'width': '300px' }"
+/>
+
+In this picture, there is also a zoom in (magnifying glass with a plus) and zoom out button (magnifying glass with a minus).
+You can click one of these and then left click to either zoom in or zoom out.
+You can also zoom in and out by either moving your mouse scroll, or using CTRL + and CTRL - if on windows.
+Don't forget to click back on "**Pan Map**" in order to move the map around again.
+
+## Plugins and saving
+
+Next, in the bar towards the top of the screen, click "**Plugins**" and "**Manage and Install Plugins...**"
+In the search bar, type and install: "**QuickMapServices**."
+The author is [NextGIS](https://nextgis.com/).
+Make sure it pops up on the left side under "**Installed**" to see if it is downloaded.
+You might need to restart QGIS to be able to use the plugin.
+Before restarting, make sure that you save the exercise.
+Click "**Project**" in the top left and "**save**."
+Select a location and choose a file name.
+The file should save as "**.qgz**."
+
+## Create a basemap layer
+
+Towards the top right of the screen, hover your mouse over a few of the icons and find "**QuickMapServices**."
+It should look like this:
+
+<ContentFigure 
+   :imgSrc="'/exercise_files/images/pic2.png'"
+   :description="'QuickMapServices'"
+   :style="{'width': '300px' }"
+/>
+
+Click on it -> OSM -> OSM Standard.<br> 
+You should now see something like this:<br>
+
+<ContentFigure 
+   :imgSrc="'/exercise_files/images/pic3.png'"
+   :description="'QuickMapServices'"
+   :style="{'width': '275px' }"
+/>
+
+In the bottom right corner, you should see something like "**EPSG: 4326**."
+We can change the map projection by clicking this and select: "**EPSG: 3857**." This is what most maps use.
+Click "**Apply**" and "**Okay**."
+
+## Formatting Data
+
+Double click your layer, it should look something like "**SDG Indicator...**" under "**Layers**" on the left side.
+A new window should pop up.
+On the left side, click "**Symbology**."
+In here you can change the color of your data, the opacity, as well as choose different icons.
+If you are happy with your changes, click "**Apply**" and then "**Okay**." Otherwise, just click cancel.
+
+<Quiz :quiz-data="{
+  questions: [
+    {
+      question: 'What type of map are we using in our exercise that shows drinking water contaminants by percentile?',
+      options: [
+        {
+          answer: 'Choropleth Map',
+          key: 1
+        },
+        {
+          answer: 'Chorochromatic Map',
+          key: 2
+        },
+        {
+          answer: 'None of the above',
+          key: 3
+        }
+      ],
+      correctAnswer: 1
+    },
+    {
+      question: 'What kind of data are we downloading?',
+      options: [
+        {
+          answer: 'Raster',
+          key: 1
+        },
+        {
+          answer: 'Vector',
+          key: 2
+        }
+      ],
+      correctAnswer: 2
+    },
+  ]
+}" />
+
+**Didn't get the correct answer?**
+<Stepper 
+  :steps="[
+    { heading: 'Question 1', content: 'refer back to Types of spatial data in <a href=\'https://interactivelearner-gis-git-omar-webgis-interactive-learner.vercel.app/lessons/spatial-data\'>Spatial data and its types</a>' },
+    { heading: 'Question 2', content: 'refer back to <a href=\'https://interactivelearner-gis-git-omar-webgis-interactive-learner.vercel.app/lessons/map-types\'>Types of maps</a>' }
+  ]"
+  :currentStep="1"
+/>