Preview of explaining blocks with examples

[cjyuan]

Preview of the proposed changes:

1. Create examples to explain what the Html and Array blocks do and how to use them.
2. Prepare or rewrite exercises to help participants learn to use blocks.
3. Prepare or rewrite some of the projects to encourage participants to solve larger problems with blocks.

So far there is only one example and one rewritten exercise, for preview purpose.

[netlify[bot]]

✅ Deploy Preview for cyf-blocks ready!

Name	Link
🔨 Latest commit	f5be2fc8aee455627a05f9f980b5341385ba434a
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-blocks/deploys/671f97e3482b770008ba8659
😎 Deploy Preview	https://deploy-preview-94--cyf-blocks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SallyMcGrath]

OK this looks pretty great so far. My notes:

1. Rename it to examples and link it in the menu and the footer
2. I'm going to flip the order so the text is on top every time so it isn't missed. Will open a PR now

[cjyuan]

@SallyMcGrath Can you elaborate?

Rename it to examples and link it in the menu and the footer Do you mean renaming index-examples.html to examples.html?

I'm going to flip the order so the text is on top every time so it isn't missed. Will open a PR now Not sure which order and what text you were referring to. I will just go ahead and prepare the examples for now and get them ready by Monday.

[SallyMcGrath]

@SallyMcGrath Can you elaborate?

Rename it to examples and link it in the menu and the footer Do you mean renaming index-examples.html to examples.html?

I'm going to flip the order so the text is on top every time so it isn't missed. Will open a PR now Not sure which order and what text you were referring to. I will just go ahead and prepare the examples for now and get them ready by Monday.

Yes, that's what I meant. I have come back with more details, see comments and #95

[cjyuan]

I also feel the original index.html is too big. I would prefer to have one HTML file for each example/exercise/project, and then manually maintain the links to them in index.html. (A bit of extra work).

I chose to duplicate some the JS files because that was the safest and quickest hack to get the "examples" working without affecting the original exercises; I didn't have enough time to fully understand the entire JS code yet. I will refactor the code later.

[SallyMcGrath]

I also feel the original index.html is too big. I would prefer to have one HTML file for each example/exercise/project, and then manually maintain the links to them in index.html. (A bit of extra work).

I chose to duplicate some the JS files because that was the safest and quickest hack to get the "examples" working without affecting the original exercises; I didn't have enough time to fully understand the entire JS code yet. I will refactor the code later.

Yes it's definitely true that this index file is utter madness. 😂 Our dear Greg, who wrote it, is not a front end dev -- he writes compilers. It would be wonderful for someone to take it on and improve it.

But let's think through our priorities here, with a bit of pragmatism.

I think duplicating all the scripts is a mistake, because realistically it's unlikely you'll come back and refactor. I think this because it's pretty rare for anyone to do this as a volunteer at CYF - it's not personal.

I think it would be wonderful for you to take this on an simplify and fix it up. Really wonderful! I don't think that task should block these improvements for ITD Nov (and I don't think you are saying this).

So let's go for an intermediate position. Let's not duplicate the scripts, but just the index.html - and pop that in an examples page, linked from the main page. We could do that this morning and have it ready. Then you can move forward with improvements while the first piece is in production. Make sense to you?

(If you would like me to execute this, I can probably find some time today)

[cjyuan]

1. I will see what I can to reduce code duplication; examples and exercises have slight differences.

2. To help navigating between exercises and examples, I am proposing the following change for the production.

   • Rename index.html to exercises.html, and add a link to homepage in <header>.
   • In examples.html, also add a link to homepage in <header>.
   • Make index.html the homepage, with links to individual examples and exercises/projects.

3. I will focus on the content for now for the production, and improve them later.

[cjyuan]

I will add few more examples and rewrite some of the exercises/projects today. Would merging early tomorrow sounds ok to you?

[SallyMcGrath]

@cjyuan I think maybe let's hold off rewriting all the exercises? That's a significant scope creep from the plan, which was to provide some examples to help teaching. I didn't realise you meant to do a complete course rewrite. These lessons are tested and revised, so to replace them all would be very high risk and speculative.

Can you back out the exercise changes, which we should discuss and just focus on getting the examples ready to merge?

This is way way too much to load into one PR one day before launch.

[cjyuan]

@SallyMcGrath

• Which rewritten exercises would you like to keep/undo? I will assume "all" and I will undo the changes. (The participants in last ITD mainly focused on completing the block project. So if they can understands the blocks from the examples and complete their block project, I suppose we can leave the exercises unchanged for the ITD).

• We should remove the "Project: select a random facilitator" because it is too easy compared to other projects.

• On separate issue, the CSS you changed recently (which move the instructions to the top) can mess up the layout of the landing page.

[cjyuan]

@SallyMcGrath Summary of all changes (content of README_CJ.md) Mainly added examples to demonstrate how to use Html blocks and Variables

New files

• examples.html

  • Copy of index.html, with exercises replaced by examples.
  • Introduced an attribute start_code to <zero-md>.
  • The value of this attribute represents the initial HTML code and Code Blocks.
  • The value is obtained from the URL generated by clicking the SHARE button; it is the string that appears after https://DOMAN/share.html?v=.

• examples/

  • Contains descriptions of example as .md files.

Modified files

• index.html

  • Only added a line to execute a necessary JS statement.

• exercises/

  • Added links in some of the exercises to related examples. The instructions in the exercises remain unchanged.

• exercises.js

• editor.js

  • Parameterised some functions so that for "examples.html"
  • The initial code will always be loaded from the start_code attribute of <zero-md>.
  • window.localStorage won't be used to remember edited codes.

[cjyuan]

I didn't remove "Project: select a random facilitator" from index.html. If you also think we should remove it, I can comment it out in index.html.