# PlutoUI.jl TableOfContents update

**URL:** <https://discourse.julialang.org/t/plutoui-jl-tableofcontents-update/100202>\
**Category:** Pluto\
**Created:** [June 11, 2023, 10:02pm UTC](https://discourse.julialang.org/t/plutoui-jl-tableofcontents-update/100202 "2023-06-11T22:02:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [June 11, 2023, 10:02pm UTC](https://discourse.julialang.org/t/plutoui-jl-tableofcontents-update/100202/1 "2023-06-11T22:02:08Z")

</div>

Hello.  
I use a lot Pluto.jl and PlutoUI.jl for teaching.  
Now, I am trying to have a dynamic element in the title.  
However, I am having trouble with the update of the TableOfContents

I have defined the function:

```julia
function answered(ans::String)	
	if ans == "NR"
		md"""## 🔴

		---
		"""
	else
		md"""## 🟢

		---
		"""
	end
end;

```

where `ans` is the resulting object of:

```julia
@bind ans Radio(["a)","b)","c)","d)","e)","NR"], default = "NR")

```

This should give a sense of progress in the Table of Contents when answering a multiple-choice questionnaire.  
Each question is preceded by a cell containing:

```julia
answered(ans)

```

This prints the title perfectly well, according to the answer provided.  
But the TableOfContents does not update unless I open “the eye” of a cell.  
It seems that the JavaScript event observer does not detect a change in the title produced by a function.  
Any ideas for a workaround?  
Thank you!

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [June 12, 2023, 11:58am UTC](https://discourse.julialang.org/t/plutoui-jl-tableofcontents-update/100202/2 "2023-06-12T11:58:58Z")

</div>

The PlutoUI TableOfContents updates itselfs whenever a change in any cell javascript class is observed, as seen from the source:

> <https://github.com/JuliaPluto/PlutoUI.jl/blob/8347a9396ca470082a85d3870f299c085e097301/src/TableOfContents.jl#L259-L266>

The cell class changes mostly anytime anything happens in a notebook (e.g. changing code folded, cell running, changing cell code, etc…).  
I believe the problem in your case is that the cell with `answered(ans)` might execute too fast, so the change in class between `running` and `ran` happens so fast that the class is not updated.

If you put a short sleep (like `sleep(0.05)`) in your cell with `answered(ans)` your cell class should update and the user will not feel much difference for a 50ms sleep (I tried with 10ms but the cell class did not change for 10ms).

---

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [June 12, 2023, 4:33pm UTC](https://discourse.julialang.org/t/plutoui-jl-tableofcontents-update/100202/3 "2023-06-12T16:33:58Z")

</div>

Dear @disberd thank you very much! It worked.