# Reactively update content within the same cell?

**URL:** <https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033>\
**Category:** Help\
**Created:** [September 14, 2022, 10:21am UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033 "2022-09-14T10:21:35Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![ntoshev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ntoshev/32/6935_2.png) [@ntoshev](https://talk.observablehq.com/u/ntoshev)\
**Post date:** [September 14, 2022, 10:21am UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/1 "2022-09-14T10:21:35Z")

</div>

I’m trying to make a quiz like [Quiz / Nikola Toshev / Observable](https://observablehq.com/d/cd8745fabd4fc288)

I have a bunch question and the answer key for each in an array. After clicking a button, I want to indicate for each answer if it was correct or not. I understand how to do this if each question was in a separate cell, but not if they are all in one cell like in the notebook. Tried `Inputs.input()` depending on the `Input.checkbox()` that has the answer and similar things, but can’t seem to reach a working solution. Any help would be appreciated!

---

<div class="post-metadata">

**Author:** ![MarioDelgadoSr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mariodelgadosr/32/1828_2.png) [@MarioDelgadoSr](https://talk.observablehq.com/u/MarioDelgadoSr)\
**Post date:** [September 14, 2022, 1:52pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/2 "2022-09-14T13:52:18Z")

</div>

See how @patrickmineault uses the ‘Reset’ button in this notebook with the ‘set’ function: [Leaky integrate-and-fire (LIF) neuron with balanced excitation and inhibition / Patrick Mineault / Observable](https://observablehq.com/@patrickmineault/balanced-e-i-networks)

---

<div class="post-metadata">

**Author:** ![ntoshev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ntoshev/32/6935_2.png) [@ntoshev](https://talk.observablehq.com/u/ntoshev)\
**Post date:** [September 14, 2022, 2:48pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/3 "2022-09-14T14:48:34Z")

</div>

This seems similar to [Synchronized Inputs / Observable / Observable](https://observablehq.com/@observablehq/synchronized-inputs)

I’ve tried this, but it seems to require each input element to be in its own cell - you cannot declare `viewof xyz` within a function. The issue is not the button triggering the action, it is synchronizing a checkbox with an html text in the same field.

---

<div class="post-metadata">

**Author:** ![MarioDelgadoSr](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mariodelgadosr/32/1828_2.png) [@MarioDelgadoSr](https://talk.observablehq.com/u/MarioDelgadoSr)\
**Post date:** [September 14, 2022, 6:06pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/4 "2022-09-14T18:06:15Z")

</div>

It looks like some additional methods/properties have to be added to the [API](https://github.com/observablehq/inputs/blob/main/README.md#inputsbindtarget-source-invalidation) to allow for run-time update of multiple inputs hosted in a form.

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [September 15, 2022, 8:01am UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/5 "2022-09-15T08:01:48Z")

</div>

you can achieve what you want with [Composing viewofs with the view literal / Tom Larkworthy / Observable](https://observablehq.com/@tomlarkworthy/view)

I am quite good at composing these things, my current state of the art is the UI for [Simple notebook storage: cellstore / Endpoint Services / Observable](https://observablehq.com/@endpointservices/cellstore) which is done with a single call to [Squeezing more Juice out of UI libraries / Tom Larkworthy / Observable](https://observablehq.com/@tomlarkworthy/juice). cellstore has a UI playground I use to skaffold to UX [Simple notebook storage: cellstore / Endpoint Services / Observable](https://observablehq.com/@endpointservices/cellstore#ui_playground)

with juice you can take “a function of parameters to a static render of HTML e.g. (name, age) =\> html`Your name is ${name} your age is ${age}`” to a reactive version composite version where the function parameters are (bindable) subviews of a larger view

```auto
juice((name, age) => html`Your name is ${name} your age is ${age}`, {
    name: '[0]',
    age: '[1]',
})

```

view has the most flexibility. Juice is a wrapper I originally made to change how existing UI components work but I have since realised its very fast for making reactive UI’s from scratch.

---

<div class="post-metadata">

**Author:** ![ntoshev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ntoshev/32/6935_2.png) [@ntoshev](https://talk.observablehq.com/u/ntoshev)\
**Post date:** [September 20, 2022, 12:50pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/6 "2022-09-20T12:50:06Z")

</div>

Thank you for responding @tomlarkworthy . Mere composition of Inputs seems to be resolved with `Inputs.form()` (that apparently was implemented after your view library). But, neither Inputs.form nor the `view` literal seems to be able to have one Input control updating another in the same composition hierarchy. Even trying to refer to another control gets a “circular reference” error. Do you have a different idea? (I looked at `juice` but didn’t find this implemented either.)

It seems that there should be a way to have views and register events properly, but I can’t get it right.

---

<div class="post-metadata">

**Author:** ![ntoshev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ntoshev/32/6935_2.png) [@ntoshev](https://talk.observablehq.com/u/ntoshev)\
**Post date:** [September 20, 2022, 2:36pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/7 "2022-09-20T14:36:34Z")

</div>

OK, I managed to update peer controls with Inputs.bind like this:

```auto
function question(txt, answerKey) {
  const chk = Inputs.checkbox([txt], {unique:true, label: 'Check if true', valueof: x=>!!x});
  return Inputs.form([
    chk,
    Inputs.bind(Inputs.text({label: "Result", placeholder: "placeholder"}), chk),
    htl.html`<br>`
  ]);
}

```

(updated the notebook [Quiz / Nikola Toshev / Observable](https://observablehq.com/d/cd8745fabd4fc288))

Now, I need something slightly different because:

1. I want the “binding” to depend on other factors, so make it an arbitrary function, and
2. I want binding to update raw html instead of an input

I think I can fork the `Inputs.bind()` implementation to do these.

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [September 20, 2022, 2:44pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/8 "2022-09-20T14:44:13Z")

</div>

Hi I have two versions linked here [Community Help / Tom Larkworthy / Observable](https://observablehq.com/@tomlarkworthy/community-help#reactiveMultiControlUI)

---

<div class="post-metadata">

**Author:** ![ntoshev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ntoshev/32/6935_2.png) [@ntoshev](https://talk.observablehq.com/u/ntoshev)\
**Post date:** [September 20, 2022, 3:04pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/9 "2022-09-20T15:04:16Z")

</div>

Thank you @tomlarkworthy ! This seems to be what I want with 1). I still have difficulties when trying to add a submit button that enables evaluation of responses - it clears the user selection for some reason!

See the forked version [Community Help / Nikola Toshev / Observable](https://observablehq.com/d/f192ffc4dae5cdd7)

I want the answer to be evaluated as correct/incorrect after the user presses the “Submit” button, but for some reason this clears the answer that the user has selected…

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [September 20, 2022, 4:03pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/10 "2022-09-20T16:03:05Z")

</div>

You are very close. The UI ends up with a dataflow dependency on submitted, which means when the submitted value changes the UI containing cell reruns from scratch

Try “viewof submitted.value” instead, which put the dependency on the DOM node not the inner value, and reads the inner value through the DOM node instead.

views are really two variables

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [September 20, 2022, 4:21pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/11 "2022-09-20T16:21:37Z")

</div>

Actually I wrote that on the bus without thinking properly. For submitting it I would let the value pass through the submit button via the reduce function, so the submit is a gate.

> **[Community Help](https://observablehq.com/@tomlarkworthy/community-help#reactiveMultiControlUI)**
>
> Reactively update content within the same cell? you can manually use addEventListener to wire up reactivity as shown below @tomlarkworthy/view also has \`bindOneWay\` with a similar exampkle that acheive the below but with a functional transform 
> see...

You could roll that approach up into a single cell too

---

<div class="post-metadata">

**Author:** ![ntoshev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ntoshev/32/6935_2.png) [@ntoshev](https://talk.observablehq.com/u/ntoshev)\
**Post date:** [September 20, 2022, 5:39pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/12 "2022-09-20T17:39:46Z")

</div>

Hmmm…

When I do what you suggested initially, the composite control doesn’t update when I click submit. With your subsequent suggestion, the composite control shows the correct/incorrect feedback even before the Submit button is clicked, and I can’t add the filtering condition because it creates a circular definition…

It seems unavoidable for the control to lose user input state when a separate dependency has changed…

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [September 20, 2022, 6:17pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/13 "2022-09-20T18:17:44Z")

</div>

OK, so if you want to be able to read and write to a composite function without invalidating the whole thing, I think you pretty much hit the limit of `Inputs.form` and you _need_ view, because with view each subfield becomes its own subview so it supports fine grained binding and accessing individual components after the composite is constructed.

With view you can more easily listed to _just_ the submit, and update _just_ the response by reading _just_ the _answer_ and without going through dataflow by using the `viewof ui.<subcomponent>` method of access. See

> **[Community Help](https://observablehq.com/@tomlarkworthy/community-help#ui2)**
>
> Reactively update content within the same cell? you can manually use addEventListener to wire up reactivity as shown below @tomlarkworthy/view also has \`bindOneWay\` with a similar exampkle that acheive the below but with a functional transform 
> see...

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [September 20, 2022, 6:27pm UTC](https://talk.observablehq.com/t/reactively-update-content-within-the-same-cell/7033/14 "2022-09-20T18:27:03Z")

</div>

Oh funnily enough I developed view for a survey application too…

> **[Survey Slate | Survey Filler UI](https://observablehq.com/@categorise/surveyslate-filler?username=demoResponder#FnMcjZO1pn1uqmMh%7Ccell-types)**
>
> The survey filler app is login with magic link, the following links load the application is Observable or on a white label domain. demoResponder on observablehq \<-- do this demoResponder on surveyslate.org Integration tests Log in with the URL...