OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

RISE change slide and notes order (Jupyter Notebook Extension)

  • Thread starter Thread starter Gluglack
  • Start date Start date
G

Gluglack

Guest
I want to use the Jupyter Notebook extension RISE to make a presentation out of a Jupyter Notebook for a lecture.

Due to the nature of the lecture I have a markdown cell explaining something followed by a code cell which demonstrates what was explained. Most of the markdown cells should not be seen in the presentation, as they contain chunks of text which aren't fitted for a presentation. But I'd like to have them shown in the notes of the following code cell of the type "Slide".

The Problem is that due to the order of first markdown then code, the notes get added to the wrong slide (the slide before), not to the code cell following it. I want to know, if there is a way to configure it in such a way, that the notes are mapped to the following not the preceding Slide. Since the Notebooks are also the lecture notes handed out to the students the order of the relevant cells shouldn't be swapped and I don't want to use two different notebooks for that (DRY-principle)

For clarification: I use Python 3.11 with Jupyter Notebook 6.4.6 and RISE 5.7.1

Just for the sake of completeness a more visual representation:

Code:
#### Cell 1 (markdown) [Type: Slide]
I have some content
#### Cell 2 (markdown) [Type: Notes]
I want to be notes for the following cell printing "Hello World"
#### Cell 3 (code) [Type: Slide]
print("Hello World")

What I tried​


I know that RISE uses reveal.js for rendering the presentations, but my JavaSript coding skills are below beginner level at best. So I tried to ask ChatGPT. It gave me some instructions of what to do, which sounded reasonable, after I looked some of the things up:

  1. look if there exists a file named jupyter_notebook_config in ~/.jupyter and if not create it with jupyter notebook --generate-config
  2. create a directory in ~/.jupyter (I named it custom)
  3. inside it create a JavaScript file with the following content (I named it custom.js)

Code:
 require(['base/js/events'], function(events) {
  events.on('app_initialized.NotebookApp', function() {
    if (window.Reveal) {
      Reveal.addEventListener('slidechanged', function(event) {
        let currentSlide = event.currentSlide;
        let previousSlide = event.previousSlide;
        if (currentSlide && previousSlide) {
          let notes = previousSlide.querySelector('aside.notes');
          if (notes) {
            let newNotes = notes.cloneNode(true);
            currentSlide.appendChild(newNotes);
            previousSlide.removeChild(notes);
          }
        }
      });
    }
  });
});
  1. Now add the directory custom to the config, which I did with

Code:
c.NotebookApp.extra_static_paths = ["~/.jupyter/custom/"]

To clarify Step 1: Since I didn't have a config I created it with the given command. The file only consists of two lines not being commented out. The line c = get_config() and the one I added.

But this doesn't work, as the notes are still shown on the slides preceding slides. When I restart the jupyter notebook server I get following message in the Terminal (which I include for the sake of completeness):

'extra_static_paths' was found in both NotebookApp and ServerApp. This is likely a recent change. This config will only be set in NotebookApp. Please check if you should also config these traits in ServerApp for your purpose.

What I already tried to do was to check, if the file with the JavaScript code "is available" (don't know the exact term) in the notebook. If I use the developer tools on my jupyter notebook file in my browser (Firefox and Chrome) my created file exists under 127.0.0.1:<PORT>/custom/custom.js

EDIT: 'Solution'​


Even though this solution is not entirely satisfying to me, since it relies on additional cells here is what I did:

  • I created a new markdown cell above the cell I wanted to delay the notes for. It can be empty, but since I think it's kinda confusing to have seemingly empty cells, I put --- into them to create a separating line.
  • I set the slide type of the newly created cell to Slide
  • then I set the slide type of what should be notes as Note
  • at last I set the slide type of what is intended to be the slide content as - so it gets connected to the previous declaration of a slide, which is the markdown cell containing ---

Here an example of what this would look like in a more visual representation:

Code:
#### Cell 1 (markdown) [Type: Slide]
I have some content
#### Cell 2 (markdown) [Type: Slide]
---
#### Cell 3 (markdown) [Type: Notes]
I want to be notes for Cell 4 printing "Hello World"
#### Cell 4 (code) [Type: -]
print("Hello World")
<p>I want to use the Jupyter Notebook extension RISE to make a presentation out of a Jupyter Notebook for a lecture.</p>
<p>Due to the nature of the lecture I have a markdown cell explaining something followed by a code cell which demonstrates what was explained.
Most of the markdown cells should not be seen in the presentation, as they contain chunks of text which aren't fitted for a presentation. But I'd like to have them shown in the notes of the following code cell of the type "Slide".</p>
<p>The Problem is that due to the order of first markdown then code, the notes get added to the wrong slide (the slide before), not to the code cell following it. I want to know, if there is a way to configure it in such a way, that the notes are mapped to the following not the preceding Slide.
Since the Notebooks are also the lecture notes handed out to the students the order of the relevant cells shouldn't be swapped and I don't want to use two different notebooks for that (DRY-principle)</p>
<p>For clarification: I use Python 3.11 with Jupyter Notebook 6.4.6 and RISE 5.7.1</p>
<p>Just for the sake of completeness a more visual representation:</p>
<pre><code>#### Cell 1 (markdown) [Type: Slide]
I have some content
#### Cell 2 (markdown) [Type: Notes]
I want to be notes for the following cell printing "Hello World"
#### Cell 3 (code) [Type: Slide]
print("Hello World")
</code></pre>
<h2>What I tried</h2>
<p>I know that RISE uses reveal.js for rendering the presentations, but my JavaSript coding skills are below beginner level at best. So I tried to ask ChatGPT. It gave me some instructions of what to do, which sounded reasonable, after I looked some of the things up:</p>
<ol>
<li>look if there exists a file named <code>jupyter_notebook_config</code> in <code>~/.jupyter</code> and if not create it with <code>jupyter notebook --generate-config</code></li>
<li>create a directory in <code>~/.jupyter</code> (I named it custom)</li>
<li>inside it create a JavaScript file with the following content (I named it custom.js)</li>
</ol>
<pre><code> require(['base/js/events'], function(events) {
events.on('app_initialized.NotebookApp', function() {
if (window.Reveal) {
Reveal.addEventListener('slidechanged', function(event) {
let currentSlide = event.currentSlide;
let previousSlide = event.previousSlide;
if (currentSlide && previousSlide) {
let notes = previousSlide.querySelector('aside.notes');
if (notes) {
let newNotes = notes.cloneNode(true);
currentSlide.appendChild(newNotes);
previousSlide.removeChild(notes);
}
}
});
}
});
});
</code></pre>
<ol start="4">
<li>Now add the directory custom to the config, which I did with</li>
</ol>
<pre><code>c.NotebookApp.extra_static_paths = ["~/.jupyter/custom/"]
</code></pre>
<p>To clarify Step 1: Since I didn't have a config I created it with the given command. The file only consists of two lines not being commented out. The line <code>c = get_config()</code> and the one I added.</p>
<p>But this doesn't work, as the notes are still shown on the slides preceding slides.
When I restart the jupyter notebook server I get following message in the Terminal (which I include for the sake of completeness):</p>
<blockquote>
<p>'extra_static_paths' was found in both NotebookApp and ServerApp. This is likely a recent change. This config will only be set in NotebookApp. Please check if you should also config these traits in ServerApp for your purpose.</p>
</blockquote>
<p>What I already tried to do was to check, if the file with the JavaScript code "is available" (don't know the exact term) in the notebook. If I use the developer tools on my jupyter notebook file in my browser (Firefox and Chrome) my created file exists under <code>127.0.0.1:<PORT>/custom/custom.js</code></p>
<h2>EDIT: 'Solution'</h2>
<p>Even though this solution is not entirely satisfying to me, since it relies on additional cells here is what I did:</p>
<ul>
<li>I created a new markdown cell above the cell I wanted to delay the notes for. It can be empty, but since I think it's kinda confusing to have seemingly empty cells, I put <code>---</code> into them to create a separating line.</li>
<li>I set the slide type of the newly created cell to <code>Slide</code></li>
<li>then I set the slide type of what should be notes as <code>Note</code></li>
<li>at last I set the slide type of what is intended to be the slide content as <code>-</code> so it gets connected to the previous declaration of a slide, which is the markdown cell containing <code>---</code></li>
</ul>
<p>Here an example of what this would look like in a more visual representation:</p>
<pre><code>#### Cell 1 (markdown) [Type: Slide]
I have some content
#### Cell 2 (markdown) [Type: Slide]
---
#### Cell 3 (markdown) [Type: Notes]
I want to be notes for Cell 4 printing "Hello World"
#### Cell 4 (code) [Type: -]
print("Hello World")
</code></pre>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top