From 1f34c594b1a4cb42a7667bf89f3b6c6d0231f16a Mon Sep 17 00:00:00 2001
From: Toby Hodges <tbyhdgs@gmail.com>
Date: Wed, 30 Aug 2023 20:59:35 +0200
Subject: [PATCH] use spoiler class divs

---
 episodes/02-image-basics.md         |  2 +-
 episodes/08-connected-components.md |  6 +-----
 learners/setup.md                   | 14 +++-----------
 3 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/episodes/02-image-basics.md b/episodes/02-image-basics.md
index 5f77299c..63b6106c 100644
--- a/episodes/02-image-basics.md
+++ b/episodes/02-image-basics.md
@@ -115,7 +115,7 @@ from skimage.draw import disk  # form 3, load only the disk function
 import numpy as np             # form 4, load all of numpy into an object called np
 ```
 
-::::::::::::::  solution
+::::::::::::::::  spoiler
 
 ## Further Explanation
 
diff --git a/episodes/08-connected-components.md b/episodes/08-connected-components.md
index fb5ea8fd..77d19d88 100644
--- a/episodes/08-connected-components.md
+++ b/episodes/08-connected-components.md
@@ -321,11 +321,7 @@ plt.imshow(labeled_image)
 plt.axis("off");
 ```
 
-:::::::::::::: {.empty-div style="margin-bottom: 50px"}
-<!-- This div is intentionally empty to allow the solution to float alone -->
-::::::::::::::
-
-::::::::::::::  solution
+::::::::::::::::  spoiler
 
 ## Color mappings
 
diff --git a/learners/setup.md b/learners/setup.md
index 53fff013..329e994b 100644
--- a/learners/setup.md
+++ b/learners/setup.md
@@ -70,11 +70,7 @@ e.g. your Desktop or a folder you have created for using in this workshop.
 
 3. Open a Jupyter notebook:
 
-   :::::::::::::: {.empty-div style="margin-bottom: 50px"}
-   <!-- This div is intentionally empty to allow the solution to float alone -->
-   ::::::::::::::
-
-   ::::::::::::::  solution
+   ::::::::::::::::  spoiler
 
    ## Instructions for Linux \& Mac
 
@@ -83,7 +79,7 @@ e.g. your Desktop or a folder you have created for using in this workshop.
 
    :::::::::::::::::::::::::
 
-   ::::::::::::::  solution
+   ::::::::::::::::  spoiler
 
    ## Instructions for Windows
 
@@ -119,11 +115,7 @@ e.g. your Desktop or a folder you have created for using in this workshop.
 
    Upon execution of the cell, a figure with two images should be displayed in an interactive widget. When hovering over the images with the mouse pointer, the pixel coordinates and colour values are displayed below the image.
 
-   :::::::::::::: {.empty-div style="margin-bottom: 50px"}
-   <!-- This div is intentionally empty to allow the solution to float alone -->
-   ::::::::::::::
-
-   ::::::::::::::  solution
+   ::::::::::::::::  spoiler
 
    ## Running Cells in a Notebook