arve0 / codeclub_lesson_builder Goto Github PK

It would be cool to have a scoreboard, so that the kids can compete to solve the most lessons! (Stealed this idea from @gahjelle)

In order to make it easier to debug, let gulp create sourcemaps of the js-files in scripts (mapping script.min.js).

demo

• Include styles from lesson_format as asset.
• Add option for developers to compile style via sass

The line https://github.com/arve0/codeclub_lesson_builder/blob/master/scripts/index.js#L17 creates problems when this.id is "Videregående Python", and you can't get the course info. The built html source looks like this:

<h1 id="Videregående Python" [..omitted]></h1>

Removing the whitespace in the header in python2\index.md fixed the problem, but doesn't (obviously) display nicely.

Possible fix:
Let this.id be the folder name ( ex. python2), which is guaranteed to be without whitespace.

When making headlines with the {.flag} or {.save} styles, horizontal lines are drawn both above and below the environment. This seems a bit too busy, it would probably be enough with just the line above the headline.

The bouncing i seems to have the desired effect that more people are finding the information text.

However, several people have commented that they find it too intrusive and disturbing, so we should try to improve upon it, while still making sure that people realize that there is text revealed by the icon.

Below are a few suggestions:

• Use a pulse like for instance pulse2 at http://cssdeck.com/labs/simple-css3-heart-pulsing-animations instead of the bounce.
• Turn off the animation after the text is clicked (however this still leaves the icon bouncing for later visits when you don't need to read the information text.
• Instead of the animation, add a small text below the headline saying something like Click for more information. This text could possibly be animated into place so as to catch the attention of the viewer but then not move as the text is more explicit than the current icon.
• Reveal the text when hovering over the i or headline instead of when clicking?

Other ideas? @tjesi @Helgenen @cmyrland

Is it possible to create a new "course" named "Hour of Code", where we have playlists named for example "first grade", "second grade" etc? The playlist would then contain projects from the other courses or links to other webpages. For example the playlists:

"first grade" would go to studio.code.org
"fourth grade" would contain projects in scratch
"sevent grade" would contain projects in python

I think we should be able to add resources/links to lessons, such as a youtube tutorials showing how the lessons can be solved etc.

If the webhook receives several merged PR close in time, the builder will spin up multiple builds at the same time. A check should be added to avoid this.

Use linguist such as github flavored markdown.

So that one doesn't need to go back to continue.

A couple of approaches:

• Use a cookie to set state
• Use iframe

https://github.com/CMClay/metalsmith-lunr

@kwrl Hva synes du om denne løsningen: https://github.com/arve0/metalsmith-kodeklubben/tree/playlist?

(Du må ta en pull på src/oppgaver for å få omstruktureringen).

Strukturen er følgende

• level i YAML -> spilleliste
  • heltall = spilleliste
    • har lagt til tom 00-spilleliste.md med title og feks level: 1
  • flyttall = oppgave
• oppgaver og spillelister sorteres etter filnavn
  • hver spilleliste må være i egen katalog
  • oppgaver i spillelisten trenger ikke legges i egen katalog, men kan dersom ønskelig

playlist line 58 does not remove lines which contain \r.

Hi Sorry to bother you again,

So now I'm trying to create my own resources but it's only showing as plain text. If I copy and paste the "Balloons" example into an md file, gulp will first produce everything correctly and the structure is there. As soon as I try to edit it to make it what I want it reloads as just plain text.

For instance, the exact same file but with the div class ='scratch-preview' html block removed from the introduction, it will just load the plain text. Any idea why?

This appears to be a problem with metalsmith:
metalsmith/metalsmith#65 (comment)

Here’s the output:

$ gulp
[16:05:52] Using gulpfile metalsmith-kodeklubben/gulpfile.js
[16:05:52] Starting 'build'...
[16:05:52] Starting 'css'...
[16:05:52] Starting 'js'...
[16:05:52] Starting 'assets'...
[16:05:53] Finished 'js' after 851 ms
[16:05:54] Finished 'css' after 1.53 s
{ [Error: EMFILE, open 'metalsmith-kodeklubben/src/oppgaver/scratch/kurs_viderekommende/hvor_i_all_verden/europakart.png']
  errno: 20,
  code: 'EMFILE',
  path: 'metalsmith-kodeklubben/src/oppgaver/scratch/kurs_viderekommende/hvor_i_all_verden/europakart.png' }
[16:05:54] 'build' errored after 1.55 s
[16:05:54] Error: EMFILE, open 'metalsmith-kodeklubben/src/oppgaver/scratch/kurs_viderekommende/hvor_i_all_verden/europakart.png'
[16:05:54] Finished 'assets' after 1.52 s

Every image has the style

display: block

which forces the text to wrap. This is set to allow for resizing of images upon browser resize.

TODO

• Find a way to keep responsive images and fix this
• Or do not use responsive images

[16:44:40] Working directory changed to ~/Projects/oppgaver/codeclub_lesson_builder
[16:44:43] Using gulpfile ~/Projects/oppgaver/codeclub_lesson_builder/gulpfile.js
[16:44:43] Starting 'pdf'...
[16:44:43] 'pdf' errored after 99 ms
[16:44:43] Error: PhantomJS not installed
    at /home/okpedersen/Projects/oppgaver/codeclub_lesson_builder/node_modules/nodepdf-series/index.js:119:28
    at /home/okpedersen/Projects/oppgaver/codeclub_lesson_builder/node_modules/nodepdf-series/child.js:36:12
    at ChildProcess.exithandler (child_process.js:641:7)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:743:16)
    at Socket.<anonymous> (child_process.js:956:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:466:12)

It is already installed:

$ pwd 
~/Projects/oppgaver/codeclub_lesson_builder/node_modules/nodepdf-series/node_modules
$ ls
phantomjs  shell-quote

In a while there are going to be a lot of resources available, and we should prioritize what to show and what not to show at the front page.

One suggestion is that we both have the following at the front page:

1. our own course-material.

• Scratch, Python etc
  1. combinations.
  2. ex. when clicking Arduino, you currently go to Kodegenets Arduino course, but should go to a page where you can choose between different Arduino-resources, including Kodegenet.
  3. others.
  4. "Andre ressurser" which goes to a page where you can click at ex. "Code.org" and get redirected to studio.code.org etc.

Ideas?

Search-boksen i meny-linjen står skjevt i forhold til Home-knappen. Muligens fordi LKK-lenken er tatt bort.

Vil også nevne at den lille versjonen av KodeTimen-ikonet ikke er alignet på samme måte som de andre ikonene (teksten under er f.eks. mye høyere oppe).

Screenshot var tatt på Chrome på OSX (mac) Version 46.0.2490.86 (64-bit), og codeclub_lesson_builder bygget fra commit 3310724 (p.t. HEAD på master).

Same issue on desktop chrome if horisontal resolution is below 446 pixels.

Wrapping of "click for more info" should also be adjusted:

It would be simpler for new contributors if the builder had an interface which hides some of github's features.

@kwrl You did start on this, do you have any code that is relevant?

I feel stupid for not having thought of this before.

http://blog.npmjs.org/post/118810260230/building-a-simple-command-line-tool-with-npm

A fixed width (monospaced) font will make the code listings easier to read. We currently use that in the HTML, but not in the PDF.

Create print version of lessons with absolute URL's for downloads, such that they can be used standalone. Also check colors scratchblocks upon printing/pdf.

• Use a branch for differencing Norwegian templates.
• Translate template to english

Here python -> stata

I'm considering using another markdown implementation than pandoc, which will ease adding features like:

• youtube videos
• hide/show toggable content (ref #128)
• bootstrap tabs without using full HTML syntax

markdown-it has a plugin system and seems to be the goto solution nowadays.

Thoughts?

Ex: http://arve0.github.io/oppgaver/arduino/index.html

Proposed fix:
Write the search result as a functional component. Parameters to the component is the returned search data.

Add a few pixels before the keywords, and remove a few pixels after the keywords to make the footer easier to read:

I got some unexpected results using the builder, which seemed to be caused by pre-generated webpages in the build-folder.

./gulp clean
./gulp

solved the problem.

Code Club World prefers if their logo are shown in lessons translated from them.

TODO

• change template to use logo from js property
• set logo property in build.js

..through external in YAML:

---
title: Yep
external: https://kodegenet.no/track/scratch/courses/courses_scratch/chapter/chapters_scratch_ch1

---

Work have already begun in docs branch.

Master branch should be international and only include files in english.

put them beside the header with a fancy zip-icon

@gahjelle Is there a reason why we should use {.blockmotion} etc, when inline exists? https://github.com/blob8108/scratchblocks2#inline-blocks

Haven't tried it, but I guess all inline blocks can be changed to something like turn ccw (10){.blocks}.

Tried kodeklubben.github.io today in IE. The intro tour asks if I want the tour. If I say no, it keeps asking on every page I visit.

In Scratch projects inline code is marked up like for instance if on edge, bounce{.blockblue} to get proper coloring. These styles are currently missing.

We should support all colors from the old formatter: grey, lightgrey, orange, purple, pink, blue, lightblue, yellow, green and lightgreen.

In addition, some colors were missing and should be added: brown (events), darkpurple (more blocks), darkgrey (extensions).

Should we add translator as a field in the yaml-header similar to author? And then building it into the project-file the same way we do for author (in the footer). That way we can give some credit also to the fine people doing the hard work of translating projects.

Can we add the type of project (scratch, python etc) to the header so that it will be easy to see the type without knowing the project itself?

Also, add the difficulty-icon to the header.

For archives

Takes ~3 seconds, due to building complete search index. Think about building search index as part of dist-task or upon force builds.

https://www.npmjs.com/package/gulp-browserify

If projects are hidden using indexed: False the headlines Novice, Apprentice etc are still shown. They should not be shown if no projects are listed.

For an example, see the Kodetimen-page at kodeklubben/oppgaver#132

Many tasks would benefit from having the possibility to 'toggle' a hint. Currently the only possibility is to always show a hint:

* Do x, y, z

    **Hint:** use a loop

which becomes:

• Do x, y, z

  Hint: use a loop

Use linguist such as github flavored markdown.

@Jxr227

I'm not really sure how this all works. I've got it running, do I need to create index files myself? The main thing I'm after is just the ability to make (standalone) HTML files to support my research as well as PDFs of the same files that can be available as a download.

Yes, you'll need to create an index.md file for the "course" you are building. It's metadata is used to create the course name, and scaffold the course index.

This minimum layout should get you going:

- codeclub_lesson_builder
- src
  - Turtlebots
    -index.md
    -lesson1.md