Quizdown-js for interactive videos

[rodrigoprestesmachado]

Hello,

I would like to fork and extend quizdown-js to support interactive videos for teaching purpose, something like:

<div class="quizdown" video="https://www.youtube.com/watch?v=YOUTUBE_VIDEO">
	---
	primary_color: steelblue
	shuffle_questions: false
	shuffle_answers: true
	---

	### Select your superpowers!

	! 30

	- [ ] Enhanced Strength
	- [ ] Levitation
	- [x] Shapeshifting

	### What's the capital of Germany?

	! 120

	> Hint: The _largest_ city in Germany...

	1. [x] Berlin
	1. [ ] Frankfurt
	1. [ ] Paris
	1. [ ] Cologne
</div>

In this imaginative example, the question should stop (or hide) the video and appears at 30 seconds of video, and the second question will be show 120 seconds, so, if the student answers correctly the video continue.

I would like to implement something like that using quizdown-js, I believe that it is not difficult to achieve this result because we just need to add the time information and indicates the video. What do you think? How can I contribute?

Best regards
Rodrigo

[bonartm]

Sounds interesting and the youtube player api is quite customizable. I'm happy for any contributions :)

Regarding the syntax I would prefer a solution that uses the already implemented yaml based options. This makes it unnecessary to modify the parser and is inline with the existing syntax.

---
primary_color: "steelblue"
shuffle_questions: false
shuffle_answers: true
video: "https://www.youtube.com/watch?v=YOUTUBE_VIDEO"
---

### Select your superpowers!

---
seconds: 30
---

- [ ] Enhanced Strength
- [ ] Levitation
- [x] Shapeshifting

### What's the capital of Germany?

---
seconds: 120
---

> Hint: The _largest_ city in Germany...

1. [x] Berlin
1. [ ] Frankfurt
1. [ ] Paris
1. [ ] Cologne

[rodrigoprestesmachado]

I believe that the solution with yaml syntax is nice. How can I contribute? if you have some task for me I will be glad to try to develop, so, lets split the task and develop this feature =)

[bonartm]

Hi,

I have setup a first demo in the branch 10_video (0c75639). Feel free to use this for development of the feature. You can view the demo online here: https://bonartm.github.io/quizdown-js/

Three new options can be specified in the quizdown: video_id , start_seconds, end_seconds.
The video is loaded for each question and plays the video from start_seconds to end_seconds. User controls are disabled as best as possible so that the user can only watch the specified section from the video (of course she/he can always watch the full video on youtube).

The generic youtube player is implemented in the component YoutubePlayer.svelte. It takes care of setting up the library and initializing a player object. The player object can then be controlled from within higher level components.

A basic VideoView.svelte is used to display the video inside the quiz with a custom start/pause button. Which user interactions do you have in mind? The current state might be a good starting point for improvements in the main components QuizSection and VideoView.

[rodrigoprestesmachado]

You did a wonderful job!

However, I was imagining a scenario where a teacher can create a interactive video. Thus, maybe I can add a feature to allow a teacher configure if he/she wants that the question appears only at the end_time or let it always visible. Another point, don't you think that the evaluation of a question should be done at the moment that the user answers? not only at the end of the video. The objective is to try to make a student think/reflect about the video content, so this "fast feedback" maybe be important in this interactive video scenario.

I will fork the project to try to understand the code and contribute with quizdown 🙂

Thanks a lot for you job!

[bonartm]

The objective is to try to make a student think/reflect about the video content, so this "fast feedback" maybe be important in this interactive video scenario

You are right. This should be implemented in a generic way and should be treated independently from the video content. I have opened #12 for a discussion on that.

[bonartm]

I want to focus on making the core library more stable so this feature is out of scope for now. I will add a comment to the readme though for reference.