NYC COVID flowchart excerpts

graphic.js

// wrapper for document.querySelector and document.querySelectorAll
var $ = require("./lib/qsa");
var container = $.one(".flowchart-container");

// config is injected from the ArchieML doc
var config = window.flowchartConfig;

// this function adds a block based on the ID
var placeFlowchartItem = function(id, from = null) {
  // if you clicked on a box, remove any following blocks
  // this lets you jump back up several flowchart steps
  if (from) {
    while (from.nextElementSibling) from.nextElementSibling.remove();
  }
  // get the template for this item, and clone it
  var template = $.one(`template#${id}`);
  var cloned = template.content.cloneNode(true).querySelector(".flowchart-item");
  container.append(cloned);
  // set the focus only if the user manually clicked
  if (from) {
    cloned.focus();
  }
}

// delegated listener
var onChangeContainer = function(e) {
  // check for button clicks
  var block = e.target.closest(".flowchart-item");
  var chosen = $.one("input:checked", block);
  var target = chosen.value;
  // insert a block after the clicked item
  placeFlowchartItem(target, block);
  // visually flag that these buttons have been activated
  var buttonContainer = $.one(".choices", block);
  buttonContainer.classList.add("chosen");
}

container.addEventListener("change", onChangeContainer);

// insert the starting block
placeFlowchartItem(config.starting);

index.ejs

<!-- this file is an EJS template, similar to a Ruby or PHP template file -->

<div id="" class="graphic">

    <!-- container for the actual flowchart -->
    <div class="flowchart-container">
    
        <!-- here we output the template tags for each blog -->
        <% for (var [key, entry] of Object.entries(TEXT.parsed.flowchart)) { %>
        <template id="<%= key %>">
            <div class="flowchart-item" tabindex="-1">
            <% if (entry.headline) { %>
            <h2><%= entry.headline %></h2>
            <% } %>
            
            <%= entry.text ? t.renderMarkdown(entry.text) : "" %>

            <% if (entry.choices) { %>
            <div class="choices">
                <% for (var c of entry.choices) { %>
                <input
                value="<%= c.goto %>"
                type="radio"
                id="<%= key %>-<%= c.goto %>"
                name="<%= key %>-choices" />
                <label for="<%= key %>-<%= c.goto %>"><%= c.label %></label>
                <% } %>
            </div>
            <% } %>
            </div>
        </template>
        <% } %>
        
        <!-- flowchart blocks will be placed here via JS -->
        
    </div>
</div>