1068 Tabs Have Got To Go (#1268)

* add usage example * storing this so as to not lose it * mass regex on tabs might also go to %% * update docs * tabs must have more than one tab * chomp whitespace on multiple choice now tabs are renderered differently we could trigger accidental escapes via whitespace -- have done this on the quiz but will look for more * chomp whitespace in timer * renderstring tabs we will never use tabs in an external context anyway as they need js * chomp whitespace in shortcodes reduce chance of hugo wrapping these inline elements with p tags * really chomp whitespace on time moving comments seems to be the last thing? * delete old tab shortcode * replace markdownify where pos because they are threatening to deprecate it * didn't even notice myself doing this * add === to delimiter * update tab delimiter * chomp whitespace without surcease * final chomps and revert render on local that was for illustration only! * that answers that question! ty daniel! * OMG PRETTIER WHY ARE YOU LIKE THIS
CodeYourFuture · Jan 2, 2025 · f73a104 · f73a104
1 parent 856b5d6
commit f73a104
Show file tree

Hide file tree

Showing 77 changed files with 386 additions and 556 deletions.
diff --git a/common-content/en/blocks/blockers/index.md b/common-content/en/blocks/blockers/index.md
@@ -16,7 +16,7 @@ time=50
 [Online Version of this game](https://www.dr-mikes-math-games-for-kids.com/online-traffic-jam-game.html)
 
 {{<tabs name="blockers-game">}}
-{{<tab name="Gameplay">}}
+===[[Gameplay]]===
 
 {{<note type="activity" title="Activity 25 minutes">}}
 
@@ -37,9 +37,7 @@ Back in the main room.
 What did people think about this game? Let’s go around and each group share **one thing** you noticed about it.
 {{</note>}}
 
-{{</tab>}}
-
-{{<tab name="Facilitation Tips">}}
+===[[Facilitation Tips]]===
 
 You can do this workshop in person, online, or a mix of both. You can run this workshop completely offline using this kit: [Rush Hour](https://www.thinkfun.com/products/rush-hour/).
 
@@ -80,5 +78,4 @@ It’s a good reflection on blockers and planning.
 - Backup alternative online game: https://www.crazygames.com/game/rush-hour-online
 - Physical version of this game: https://www.thinkfun.com/products/rush-hour/
 
-  {{</tab>}}
-  {{</tabs>}}
+{{</tabs>}}
diff --git a/common-content/en/blocks/retro/index.md b/common-content/en/blocks/retro/index.md
@@ -11,10 +11,10 @@ hide_from_overview=true
 +++
 
 {{<tabs name="Run a retro">}}
-{{<tab name="Video">}}
+===[[Video]]===
 {{<youtube>}}https://www.youtube.com/watch?v=3rCllHgDl7s{{</youtube>}}
-{{</tab>}}
-{{<tab name="Text">}}
+
+===[[Text]]===
 
 {{<note title="Retro (20 minutes)" type="activity">}}
 A retro is a chance to reflect. You can do this on [RetroTool](https://retrotool.io/) (create a free anonymous retro and share the link with the class) or on sticky notes on a wall.
@@ -27,6 +27,5 @@ A retro is a chance to reflect. You can do this on [RetroTool](https://retrotool
 1. Finally, set a [timer for 8 minutes](https://www.google.com/search?q=timer+8+minutes) and all discuss the top three themes.
 
 {{</note>}}
-{{</tab>}}
 
 {{</tabs>}}
diff --git a/common-content/en/blocks/spaced-repetition/index.md b/common-content/en/blocks/spaced-repetition/index.md
@@ -11,7 +11,7 @@ hide_from_overview=true
 +++
 
 {{<tabs name="Scheduled check-ins">}}
-{{<tab name="Text">}}
+===[[Text]]===
 
 ## What are we doing now?
 
@@ -39,10 +39,8 @@ _Write down your answers first_ and then update them after looking at the sample
 - [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS)
 - [A large language model like ChatGPT](https://chat.openai.com/)
 - [Devtools](https://developer.chrome.com/docs/devtools/)
-  {{</tab>}}
+  ===[[Video]]===
+  {{<youtube>}}https://www.youtube.com/watch?v=U1QWx8xbbt4
+  {{</youtube>}}
 
-{{<tab name="Video">}}
-{{<youtube>}}https://www.youtube.com/watch?v=U1QWx8xbbt4
-{{</youtube>}}
-{{</tab>}}
-{{</tabs>}}
+  {{</tabs>}}
diff --git a/common-content/en/blocks/telephone/index.md b/common-content/en/blocks/telephone/index.md
@@ -10,16 +10,15 @@ time=15
 +++
 
 {{<tabs name="telephone">}}
-{{% tab name="Telephone" %}}
+===[[Telephone]]===
 
 {{<note type="activity" title="Ring Ring Bananaphone">}}
 In groups of no more than 5, we’re going to play a game of telephone.
 
 → [Telephone](https://garticphone.com/)
 {{</note>}}
-{{% /tab %}}
 
-{{<tab name="Unplugged Version">}}
+===[[Unplugged Version]]===
 
 {{<note type="activity" title="Ring Ring Bananaphone">}}
 To play Telephone without the internet, you will need: pens, paper, a stopwatch or timer
@@ -35,5 +34,5 @@ To play Telephone without the internet, you will need: pens, paper, a stopwatch
 - When the timer rings, fold the paper over and pass it left
 - Continue until your starting paper returns to you
   {{</note>}}
-  {{</tab>}}
+
   {{</tabs>}}
diff --git a/common-content/en/module/databases/communicating-with-db/index.md b/common-content/en/module/databases/communicating-with-db/index.md
@@ -20,21 +20,21 @@ emoji= '🧩'
 ## 👩🏽‍✈️👨🏾‍✈️Code along with video mentors
 
 {{<tabs name="Communicating with DB">}}
-{{<tab name="setup select statement">}}
+===[[setup select statement]]===
 {{<youtube>}}https://www.youtube.com/watch?v=jpCUG_NH_ew{{</youtube>}}
-{{</tab>}}
-{{<tab name="selecting columns">}}
+
+===[[selecting columns]]===
 {{<youtube>}}https://www.youtube.com/watch?v=cHM_nSSIyp8{{</youtube>}}
-{{</tab>}}
-{{<tab name="psql commands">}}
+
+===[[psql commands]]===
 {{<youtube>}}https://www.youtube.com/watch?v=folFY2yrvBg{{</youtube>}}
-{{</tab>}}
-{{<tab name="where clauses">}}
+
+===[[where clauses]]===
 {{<youtube>}}https://www.youtube.com/watch?v=DpS5dlIiHWU{{</youtube>}}
-{{</tab>}}
-{{<tab name="distinct ordering limits">}}
+
+===[[distinct ordering limits]]===
 {{<youtube>}}https://www.youtube.com/watch?v=Ci4Dspp8h1A{{</youtube>}}
-{{</tab>}}
+
 {{</tabs>}}
 
 ---

diff --git a/common-content/en/module/databases/crud/index.md b/common-content/en/module/databases/crud/index.md
@@ -17,18 +17,18 @@ emoji= '🧩'
 +++
 
 {{<tabs name="CRUD Operations">}}
-{{<tab name="Insert">}}
+===[[Insert]]===
 
 ## 👩🏽‍✈️👨🏾‍✈️Code along with video mentors
 
 {{<youtube>}}https://www.youtube.com/watch?v=g1eHag5BG6o&list=PLozA7cloMbPhJgWwncnb-N4yI07JpUcs5&index=3{{</youtube>}}
-{{</tab>}}
-{{<tab name="Create">}}
+
+===[[Create]]===
 {{<youtube>}}https://www.youtube.com/watch?v=ojLmL6tfj_E&list=PLozA7cloMbPhJgWwncnb-N4yI07JpUcs5&index=4{{</youtube>}}
-{{</tab>}}
-{{<tab name="Update and Delete">}}
+
+===[[Update and Delete]]===
 {{<youtube>}}https://www.youtube.com/watch?v=7VXTXjnFtZo&list=PLozA7cloMbPhJgWwncnb-N4yI07JpUcs5&index=5{{</youtube>}}
-{{</tab>}}
+
 {{</tabs>}}
 
 ---

diff --git a/common-content/en/module/databases/recap-node/index.md b/common-content/en/module/databases/recap-node/index.md
@@ -51,7 +51,7 @@ app.listen(3000, function () {
 Before we move on, run the `server.js` file in node and check the endpoint using your browser.
 
 {{<tabs name="Communicating with DB">}}
-{{<tab name="Using Postman">}}
+===[[Using Postman]]===
 
 ### Using Postman to Test an API
 
@@ -64,8 +64,8 @@ Run Postman (it can be slow to start).
 Check the method is GET, set the URL for your customers endpoint then click Send.
 
 ![postman get cust all results](postman-get-cust-all-results.png)
-{{</tab>}}
-{{<tab name="👩🏽‍✈️👨🏾‍✈️Code along : Retrieving individual records">}}
+
+===[[👩🏽‍✈️👨🏾‍✈️Code along : Retrieving individual records]]===
 {{<youtube>}}https://www.youtube.com/watch?v=LNfZAI3dp10&list=PLozA7cloMbPhJgWwncnb-N4yI07JpUcs5&index=1{{</youtube>}}
-{{</tab>}}
+
 {{</tabs>}}
diff --git a/common-content/en/module/html-css/recap-html-css/index.md b/common-content/en/module/html-css/recap-html-css/index.md
@@ -16,16 +16,16 @@ emoji= '🧩'
 +++
 
 {{<tabs name="HTML and CSS basics">}}
-{{<tab name="1. Intro to HTML">}}
+===[[1. Intro to HTML]]===
 {{<youtube>}}https://www.youtube.com/watch?v=PqYud9dGW5s{{</youtube>}}
-{{</tab>}}
-{{<tab name="2. What is Semantic HTML">}}
+
+===[[2. What is Semantic HTML]]===
 {{<youtube>}}https://youtu.be/9ZHOhKbNFsI{{</youtube>}}
-{{</tab>}}
-{{<tab name="3. Intro to CSS">}}
+
+===[[3. Intro to CSS]]===
 {{<youtube>}}https://www.youtube.com/watch?v=pwMQcKFPOlo{{</youtube>}}
-{{</tab>}}
-{{<tab name="4. CSS Selectors">}}
+
+===[[4. CSS Selectors]]===
 {{<youtube>}}https://www.youtube.com/watch?v=mBmX7944vd0{{</youtube>}}
-{{</tab>}}
+
 {{</tabs>}}
diff --git a/common-content/en/module/js1/api/index.md b/common-content/en/module/js1/api/index.md
@@ -41,13 +41,9 @@ We've encountered several functions like `console.log` and `Math.round` already.
 Jest provides an **API** so we can write tests.
 So we have to find out about the Jest API to start writing tests with Jest.
 
-{{<tabs name="exercises">}}
-
-{{<tab name="🧐 Other APIs">}}
-
-Try and list other examples of APIs you've used since the start of the course.
-Start a thread in Slack to discuss with your class.
-
-{{</tab>}}
-
-{{</tabs>}}
+> [!NOTE]
+>
+> ## 🧐 Other APIs
+>
+> Try and list other examples of APIs you've used since the start of the course.
+> Start a thread in Slack to discuss with your class.
diff --git a/common-content/en/module/js1/assertions/index.md b/common-content/en/module/js1/assertions/index.md
@@ -19,7 +19,7 @@ emoji= '🧩'
 
 {{<tabs name="Predict, explain, check">}}
 
-{{<tab name="Define assertion">}}
+===[[Define assertion]]===
 
 We now have 2 new concepts: **booleans** and **comparisons**. From these concepts, we can now write an assertion about the function `formatAs12HourClock`.
 
@@ -35,9 +35,7 @@ console.assert(calculation === result);
 
 🎮 [Work through the exercises](#predict-explain-check-1)
 
-{{</tab>}}
-
-{{<tab name="Exercise 1">}}
+===[[Exercise 1]]===
 
 ### Experiment with assertions
 
@@ -50,9 +48,7 @@ console.assert(calculation === result);
 Change the value assigned to the `result` variable to make the assertion fail. Check the output you get in the console.
 
 👉🏿 [Keep Going](#predict-explain-check-2)
-{{</tab>}}
-
-{{<tab name="Exercise 2">}}
+===[[Exercise 2]]===
 
 Let's look at an example using `formatAs12HourClock`:
 
@@ -63,8 +59,6 @@ console.assert(formatAs12HourClock("08:00") === "08:00 am");
 
 Predict and explain if the assertion will succeed or fail. Pay particular attention to the return value of `formatAs12HourClock`.
 
-{{</tab>}}
-
 {{</tabs>}}
 
 ### Clarity with arguments
@@ -108,7 +102,7 @@ Assertion failed: current output: undefined, target output: 08:00 am
 
 ## 🧰 Implementing the functionality
 
-On line 3, the function is being passed a single argument `"08:00"`. But our function ignores it:  it doesn't declare any parameters. We can parameterise the function and label the input as `time`:
+On line 3, the function is being passed a single argument `"08:00"`. But our function ignores it: it doesn't declare any parameters. We can parameterise the function and label the input as `time`:
 
 ```js
 function formatAs12HourClock(time) {}

diff --git a/common-content/en/module/js1/comparison/index.md b/common-content/en/module/js1/comparison/index.md
@@ -16,10 +16,10 @@ emoji= '🧩'
 +++
 
 {{<tabs name="current">}}
-{{<tab name="Define current and target">}}
+===[[Define current and target]]===
 Let's start with a function declaration of `formatAs12HourClock`:
 
-```js {linenos=table,linenostart=1}
+```js
 function formatAs12HourClock() {}
 ```
 
@@ -28,13 +28,11 @@ Whenever we call `formatAs12HourClock` we expect it to return a particular value
 However, the **current output** is what the function _actually_ returns right now.
 
 👉🏼 [Work through the exercises](#current-1)
-
-{{</tab>}}
-{{<tab name="Exercise 1">}}
+===[[Exercise 1]]===
 
 Let's start with `formatAs12HourClock` defined like this:
 
-```js {linenos=table,linenostart=1}
+```js
 function formatAs12HourClock() {}
 ```
 
@@ -44,19 +42,14 @@ Suppose we now call the function like this:
 formatAs12HourClock("05:30");
 ```
 
-For the call above, what is the
-
-a) the current output?
-b) the 🎯 target output?
+{{<multiple-choice question="When calling formatAs12HourClock('05:30'), what is the 🎯 target output?" answers="`'05:30 am'` | `'05:30 AM'` | `'5:30 am'` | `'17:30'`" feedback="Correct! The target output should append 'am' to maintain the 12-hour clock format. | Not quite - based on the examples, we use lowercase 'am'. | No - we want to preserve the leading zero. | No - we want 12-hour format, not 24-hour format." correct="0" >}}
 
 👉🏼 [Keep going](#current-2)
-
-{{</tab>}}
-{{<tab name="Exercise 2">}}
+===[[Exercise 2]]===
 
 Let's continue with `formatAs12HourClock` defined like this:
 
-```js {linenos=table,linenostart=1}
+```js
 function formatAs12HourClock() {}
 ```
 
@@ -66,12 +59,8 @@ Suppose we call the function like this:
 formatAs12HourClock("20:10");
 ```
 
-For the call above, what is the
-
-a) the current output?
-b) the 🎯 target output?
+{{% multiple-choice question="When calling formatAs12HourClock('05:30'), what is the current output?" answers="undefined | '05:30 am' | null | An error is thrown" feedback="Correct! Since the function is empty and has no return statement, it returns undefined by default. | Not quite - remember that the function is currently empty with no implementation. | No - an empty function returns undefined, not null. | No - an empty function executes successfully but returns undefined." correct="0" %}}
 
-{{</tab>}}
 {{</tabs>}}
 
 ## 🧩 Comparing values
@@ -93,7 +82,7 @@ formatAs12HourClock("08:00") === "8:00 am";
 ## ✅ ❌ Boolean values
 
 {{<tabs name="booleans">}}
-{{<tab name="Define Boolean">}}
+===[[Define Boolean]]===
 
 ### Does 1 equal 0? Yes or No? True or False?
 
@@ -112,9 +101,7 @@ console.log(10 * 5 === 60);
 ```
 
 👉🏾 [Now work through the exercises](#booleans-1)
-{{</tab>}}
-
-{{<tab name="Exercise 1">}}
+===[[Exercise 1]]===
 Look at the code below and predict what each expression will evaluate to. Write your prediction down. Use the Node REPL to check your answers. Check out [some relevant documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) if you've not seen a particular operator before.
 
 ```js {linenos=table,linenostart=1}
@@ -131,9 +118,7 @@ let kilometersMhairiDrivesToWork = 9.4;
 ```
 
 👉🏿 [Keep Going](#booleans-2)
-
-{{</tab>}}
-{{<tab name="Exercise 2">}}
+===[[Exercise 2]]===
 Look at the code below and predict what each expression will evaluate to. Write your prediction down. Use the Node REPL to check your answers. Check out [some relevant documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) if you've not seen a particular operator before
 
 ```js {linenos=table,linenostart=1}
@@ -147,9 +132,7 @@ Math.round(kilometersMhairiDrivesToWork) === 9;
 ```
 
 👉🏿 [Keep Going](#booleans-3)
-{{</tab>}}
-
-{{<tab name="Exercise 3">}}
+===[[Exercise 3]]===
 
 ### Checking misconceptions 🤔
 
@@ -161,5 +144,4 @@ Try using the Node Repl to check your answer. Does the REPL output make sense?
 console.log(10 + 32) === 42;
 ```
 
-{{</tab>}}
 {{</tabs>}}