Add scaffolding to assist with script loading (#28)

As discussed [in this PR review discussion](#24 (comment)), we don't think trainees will have much experience with importing code (especially considering that various projects use HTML, ESM and/or [ESM with JSON import attributes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with)). Therefore this PR provides scaffolding which demonstrates importing basics.
CodeYourFuture · Jan 25, 2025 · da8b049 · da8b049
1 parent d7eae69
commit da8b049
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 4 deletions.
diff --git a/Project-Days-Calendar/README.md b/Project-Days-Calendar/README.md
@@ -72,7 +72,7 @@ Each time you do this, you probably want to delete your Test calendar, and creat
 
 We have supplied a few sample files in the repo to demonstrate how you can define functions in one file, and use them both from a web page and a Node application. Feel free to use these files in your solution if you want, or to just use them for inspiration for your own solution.
 
-Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server - you can't open the index.html file using a file:// URL.
+Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server - you can't open the `index.html` file using a `file://` URL.
 
 ## Rubric
 

diff --git a/Project-Music-Data/README.md b/Project-Music-Data/README.md
@@ -7,10 +7,12 @@ We have supplied a collection of data for you to analyse. Your task is to write
 Make a small HTML + JavaScript frontend which displays the answers to several questions, which are listed below.
 
 Some principles to remember throughout this project:
+
 1. This is a project about data processing, not UI. You should make a simple frontend to show the data in valid semantic HTML. No credit will be given for making prettier or more complicated frontend. Do not write any CSS.
 2. You should assume the data will change in the future, but will have the same schema. So you shouldn't pre-compute anything. Your code should always read the data and calculate results from scratch.
 
-[`data.js`](./data.js) is a file containing three functions:
+We have provided a `data.js` file, which contains three functions to provide data for you to analyse. `data.js` is a file containing four functions:
+
 1. `getUserIDs()`: when called, returns an array of strings, each of which is a user ID.
 1. `getListenEvents(userID)`: when called, returns an array of objects, each of which contains information about a single time that the given user listened to a song. The listen events are sorted by when they happened, oldest to newest.
 2. `getSong(songID)`: when called with one string as an argument, returns an an object containing information about a single song.
@@ -39,6 +41,12 @@ Your GitHub repository must contain unit tests which demonstrate that your code
 6. Are there any songs that the user listened to every day between the first day that user listened to any songs and the last day that user listened to any songs? If the answer is yes, you should show which one(s). If the answer is no, you should not show anything about this question.
 7. What were the user's top three genres to listen to by number of listens?
 
+## Supplied scaffolding
+
+In addition to `data.js`, we have supplied a few sample files in the repo to demonstrate how you can define functions in one file and use them from another file. Feel free to use these files in your solution if you want, or to just use them for inspiration for your own solution.
+
+Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server - you can't open the `index.html` file using a `file://` URL.
+
 ## Rubric
 
 All of the below requirements must be met for the project to be considered complete:

diff --git a/Project-Music-Data/index.html b/Project-Music-Data/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/Project-Music-Data/script.js b/Project-Music-Data/script.js
@@ -0,0 +1,12 @@
+// This is a placeholder file which shows how you can access functions defined in other files.
+// It can be loaded into index.html.
+// You can delete the contents of the file once you have understood how it works.
+// Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server
+// You can't open the index.html file using a file:// URL.
+
+import { getUserIds } from "./data";
+
+window.onload = function () {
+  const users = getUserIds();
+  document.querySelector("body").innerText = `There are ${users.length} users`;
+};
diff --git a/Project-Shared-Bookmarks/README.md b/Project-Shared-Bookmarks/README.md
@@ -15,7 +15,11 @@ You should make a frontend, which displays a list of bookmarked links and the us
 
 ## Supplied scaffolding
 
-We have provided a `storage.js` file, which contains four functions to help with data storage. `storage.js` is a file containing four functions:
+We have supplied a few sample files in the repo to demonstrate how you can define functions in one file and use them from another file. Feel free to use these files in your solution if you want, or to just use them for inspiration for your own solution.
+
+Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server - you can't open the `index.html` file using a `file://` URL.
+
+We have also provided a `storage.js` file, which contains four functions to help with data storage. `storage.js` is a file containing four functions:
 
 - `getUserIds()`: when called, returns an array of strings, each of which is a user id
 - `getData(userId)`: when called with a user id string as an argument, returns an array of objects, each of which represents a bookmark that belongs to the user

diff --git a/Project-Shared-Bookmarks/index.html b/Project-Shared-Bookmarks/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/Project-Shared-Bookmarks/script.js b/Project-Shared-Bookmarks/script.js
@@ -0,0 +1,12 @@
+// This is a placeholder file which shows how you can access functions defined in other files.
+// It can be loaded into index.html.
+// You can delete the contents of the file once you have understood how it works.
+// Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server
+// You can't open the index.html file using a file:// URL.
+
+import { getUserIds } from "./storage";
+
+window.onload = function () {
+  const users = getUserIds();
+  document.querySelector("body").innerText = `There are ${users.length} users`;
+};
diff --git a/Project-Spaced-Repetition-Tracker/README.md b/Project-Spaced-Repetition-Tracker/README.md
@@ -8,7 +8,11 @@ You should make a frontend, which displays an agenda of topics to revise on spec
 
 ## Supplied scaffolding
 
-We have provided a `storage.js` file, which contains four functions to help with data storage. `storage.js` is a file containing four functions:
+We have supplied a few sample files in the repo to demonstrate how you can define functions in one file and use them from another file. Feel free to use these files in your solution if you want, or to just use them for inspiration for your own solution.
+
+Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server - you can't open the `index.html` file using a `file://` URL.
+
+We have also provided a `storage.js` file, which contains four functions to help with data storage. `storage.js` is a file containing four functions:
 
 - `getUserIds()`: when called, returns an array of strings, each of which is a user id
 - `getData(userId)`: when called with a user id string as an argument, returns an array of objects, each of which represents an agenda item for the user

diff --git a/Project-Spaced-Repetition-Tracker/index.html b/Project-Spaced-Repetition-Tracker/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/Project-Spaced-Repetition-Tracker/script.js b/Project-Spaced-Repetition-Tracker/script.js
@@ -0,0 +1,12 @@
+// This is a placeholder file which shows how you can access functions defined in other files.
+// It can be loaded into index.html.
+// You can delete the contents of the file once you have understood how it works.
+// Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server
+// You can't open the index.html file using a file:// URL.
+
+import { getUserIds } from "./storage";
+
+window.onload = function () {
+  const users = getUserIds();
+  document.querySelector("body").innerText = `There are ${users.length} users`;
+};
diff --git a/Project-Spell-Checker/README.md b/Project-Spell-Checker/README.md
@@ -34,6 +34,12 @@ Words that begin with capital letters, such as proper nouns and names, should al
 
 Your GitHub repository must contain unit tests which demonstrate that your code works. End to end tests are optional.
 
+## Supplied scaffolding
+
+We have supplied a few sample files in the repo to demonstrate how you can define JSON data in one file and access this both from another file. Feel free to use these files in your solution if you want, or to just use them for inspiration for your own solution.
+
+Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server - you can't open the `index.html` file using a `file://` URL.
+
 ## Rubric
 
 All of the below requirements must be met for the project to be considered complete:

diff --git a/Project-Spell-Checker/index.html b/Project-Spell-Checker/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/Project-Spell-Checker/script.js b/Project-Spell-Checker/script.js
@@ -0,0 +1,11 @@
+// This is a placeholder file which shows how you can access JSON data defined in other files.
+// It can be loaded into index.html.
+// You can delete the contents of the file once you have understood how it works.
+// Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server
+// You can't open the index.html file using a file:// URL.
+
+import words from "./words.json" with { type: "json" };
+
+window.onload = function() {
+    document.querySelector("body").innerText = `There are ${words.length} words in the Basic English dictionary`;
+}