Nicely integrating multi-part coding challenges with minimal changes

[loic-brtd]

Suggestion

Two elements that I think should really be available on a multi-part challenge page are the n videos and their corresponding timestamps. To accomplish that, I suggest the following solution:

• We could add an optional array field nextParts to the index.json file of multi-part coding challenges, which would allow us to indicate the videoId and timestamps of the next parts of the challenge.
• The root videoId, date and timestamps fields of index.json would refer to the first part/video of the coding challenge.
• All the other fields (title, description, videoNumber, ..., codeExamples, groupLinks) and the passenger showcases would still be related to the "global" challenge, not to a specific part.

Configuration example

content/videos/challenges/54-islamic-tiling-patterns/index.json

{
  "title": "Islamic Star Patterns",
  "description": "In this bonus super-sized coding challenge, I work through visualizing Islamic Star Patterns in p5.js.",
  "videoNumber": "54", // not "54.1"
  "videoId": "sJ6pMLp_IaI", // videoId of 1st part
  "date": "2017-02-14", // date of 1st part
  "languages": [...],
  "topics": [...],
  "canContribute": true,
  "relatedChallenges": [],
  "timestamps": [ /* timestamps of 1st part */ ],
  // New field
  "nextParts": [
    {
      "videoId": "lobJ9gzbLo8", // videoId of 2nd part
      "timestamps": [ /* timestamps of 2nd part */ ]
    },
    {
      "videoId": "qg8LDsd57gF", // videoId of 3rd part
      "timestamps": [ /* timestamps of 3rd part */ ]
    }
  ],
  "codeExamples": [...],
  "groupLinks": [
    {
      "title": "References",
      "links": [...]
    }
  ]
}

Note: this is a fictitious example, in reality challenge 54 has only 2 parts, not 3.

Design example

• Clicking on a part number would switch the player to the corresponding video and display the associated timestamps.
• This "parts pagination" would not appear for single part coding challenges.

Temporary solution

Whether or not we decide to implement this strategy, I think it would still be beneficial to normalize and document the (temporary) way that contributors should port multi-part challenges to the new website. This could be included in the "Maintaining the website" guide.

Such intermediate solution could be to :

• create a single folder per challenge (not per part) ;
• fill in the videoId and timestamps for the first video ;
• link to the next parts as YT videos in a groupLinks titled Next Parts of this Challenge ;
• combine code examples, passenger showcases and link references from all parts of the challenge.

Then we would just have to add a nextParts field if my solution were to be implemented.

[loic-brtd]

Previous mentions of the multi-part challenges problem

#363 (comment)

@shiffman :
So the old site had a system for multi-part coding challenges but I've now moved to just releasing longer videos with chapters. I'm not sure the best way to handle these for the older ones. I think let's just put the contributions in the last part? Maybe then we put canContribute: false in the first part? And a note in the description that says contributions are in part 2? And make sure all the parts are linked via "related challenges" or a "group link"? I think this is better than duplicating them. @klinegareth what do you think?

#363 (comment)

@shiffman :
Here's a new idea. For older multi-part challenges just have one page for them that's associated with the first (last?) video. Then create a grouplink with the other parts. We could also make a side track for some of the more popular ones.

I think we can bandaid this b/c I'm not doing multi-part challenges anymore and there aren't that many

[shiffman]

Hi @lobertrand! This is a fantastic idea! As I mentioned in earlier threads, it's lower priority b/c I don't necessarily plan on doing multi-part challenges in the future, but some previous ones are still quite popular and having a way of handling them elegantly would be nice. Are you interested in working on the implementation for this? I'm happy to approve it but I'd be curious for any design feedback from @bravomartin and/or @runemadsen before finalizing a plan.

Thank you!!!!

[loic-brtd]

Hi @lobertrand! This is a fantastic idea! As I mentioned in earlier threads, it's lower priority b/c I don't necessarily plan on doing multi-part challenges in the future, but some previous ones are still quite popular and having a way of handling them elegantly would be nice. Are you interested in working on the implementation for this? I'm happy to approve it but I'd be curious for any design feedback from @bravomartin and/or @runemadsen before finalizing a plan.

Thank you!!!!

Hi @shiffman! I'd be happy to work on the implementation for this. Any feedback on this idea and/or on the graphic design aspects is welcomed 😃 . The image I created is more of a wireframe than a final design and could certainly be improved for accessibility and to fit with the overall design system.

[kfahn22]

I really like this idea, too! It would be nice if there was a way to add the timestamps for the additional parts to the challenge, which is one drawback to current implementation.

[loic-brtd]

I created a working demo of this on PR #428
Deploy preview is here : https://deploy-preview-428--codingtrain.netlify.app/challenges/54-islamic-star-patterns

[shiffman]

WOW! This is amazing! It's so good I might even consider doing multi-part coding challenge again 😂

@runemadsen is currently away but when he is back, he can review the design.

@allcontributors please add @lobertrand for code and content.

[allcontributors]

@shiffman

I've put up a pull request to add @lobertrand! 🎉

[loic-brtd]

I was thinking that maybe it would be better to have all the parts in an array in the JSON file (instead of just the next parts) 🤔

{
  "title": "Islamic Star Patterns",
  "description": "In this bonus super-sized coding challenge, I work through visualizing Islamic Star Patterns in p5.js.",
  "videoNumber": "54",
  "videoId": "sJ6pMLp_IaI", // ignored if "parts" array is not empty
  "date": "2017-02-14",
  "languages": [...],
  "topics": [...],
  "canContribute": true,
  "relatedChallenges": [],
  "timestamps": [...],  // ignored if "parts" array is not empty
  // New field, only used for multi-part challenges
  "parts": [
    {
      // 1st part info
      "videoId": "sJ6pMLp_IaI",
      "timestamps": [...]
    },
    {
      // 2nd part info
      "videoId": "lobJ9gzbLo8",
      "timestamps": [...]
    }
  ],
  "codeExamples": [...],
  "groupLinks": [
    {
      "title": "References",
      "links": [...]
    }
  ]
}

Then it would allow us to add other properties/metadata for each part more easily in the future if we want it (like a specific title for each part for example).
What do you think? 😃 @shiffman @kfahn22

[kfahn22]

When I ported Islamic star and Chaos, I had to combine elements from both parts--the code examples for parts 1 & 2, references, and videos. This would allow for those elements to be separated, which might be nice. As long as this has no effect on the other single part challenges, I think it is a good idea.

[dipamsen]

If we are going for separating all elements for the different parts (codeExamples, groupLinks, etc), then different URLs for the parts might be worth considering.
Something like /2 or /part-2 could be used so that each part had its own URL.

[runemadsen]

Hi all! Just catching up on this. I think this is great! My only concern is that we're adding another navigational element that looks very different from the track navigation but it actually serves the same purpose. Another way to implement the same idea is that show the different challenge videos like we do with the tracks:

If this is something that is just needed for a few videos, I'm more than fine just using the current design, but I would maybe vote for simplifying it so all things with multiple videos look the same. The JSON could also take inspiration from the track JSON, so it's more streamlined.

Thoughts on this?

[loic-brtd]

@runemadsen I totally agree with you on this, it would be better to reuse the existing component for navigating through sequential videos, just like in tracks.

I'm gonna work on a solution using this and with the challenge parts placed in a subfolder, referenced in the main JSON file, this should give us URLs for the parts for free. Does it sound good to you? :)

My only concern is that this diverges too much from the way single part coding challenges are handled, but I'm gonna try to make it work :)