function RenderScroll() {
    const scrollContainer = document.querySelector("#scrollContainer");
    const description = scrollContainer.textContent;
    const assignments = JSON.parse(document.querySelector("#assignments").dataset.assignments)
    console.log(assignments);

    //everything that has a slotID is a scroll slot
    scrollContainer.querySelectorAll("[data-slot-id]").forEach(element => {
        //console.log(element);
        let slotId = element.dataset.slotId;
        let fact_assignment = assignments[slotId];

        element.setAttribute("dropzone", "copy");
        element.textContent = fact_assignment.Item1;

        if (fact_assignment.Item2 != "") {
            element.dataset.factId = fact_assignment.Item2;
        }
    });

    //everything that has a solutionID is a scroll solution
    scrollContainer.querySelectorAll("[data-solution-id]").forEach(element => {
        element.textContent = assignments[element.dataset.solutionId].Item1;
    })
    console.log('Scroll rendered')
}
RenderScroll()
// if (Regex.IsMatch(description, ".*<scroll-description.*"))
// {
//     // replace slot templates
//     description = Regex.Replace(description, "<scroll-slot([^>]*)>([^<]*)</scroll-slot>", match =>
//     {
//         var extraAttributes = match.Groups[1].Value;
//         var slotId = match.Groups[2].Value;
//         var assignment = SwitchScrollUI.activeScrollData.Assignments[slotId];
//         /** label of the assigned fact, or the slot label if nothing assigned */
//         var label = assignment.IsSet    ? assignment.fact.GetLabel(StageStatic.stage.factState)
//                                         : scroll.requiredFacts.Find(fact => fact.@ref.uri == slotId).label;
//         /** id of the assigned fact. If nothing is assigned don't add the attribute */
//         var fact_id = assignment.IsSet  ? $"data-fact-id='{assignment.fact.Id}'"
//                                         : "";
//         return $"<mi dropzone='copy' data-slot-id='{slotId}' {fact_id} {extraAttributes}>{label}</mi>";
//     });
//     // replace solution templates
//     description = Regex.Replace(description, "<scroll-solution([^>]*)>([^<]*)</scroll-solution>", match =>
//     {
//         var extraAttributes = match.Groups[1].Value;
//         var solutionId = match.Groups[2].Value;
//         var label = scroll.acquiredFacts.Find(fact => fact.@ref.uri == solutionId).label;
//         return $"<mi data-solution-id='{solutionId}' {extraAttributes}>{label}</mi>";
//     });
// }
// else
// {
//     // scroll is a legacy plain text scroll, generate html with slots for the required facts
//     var factSlots = SwitchScrollUI.activeScrollData.Assignments
//         .Where(pair => pair.Value.IsVisible)
//         .Select(pair =>
//             @$"<span class='legacySlot' dropzone='copy' data-slot-id='{pair.Key}' {(pair.Value.IsSet ? $"data-fact-id='{pair.Value.fact.Id}'" : "")}>
//                 {(pair.Value.IsSet ?
//                     pair.Value.fact.GetLabel(StageStatic.stage.factState) :
//                     scroll.requiredFacts.Find(fact => fact.@ref.uri == pair.Key).label )}
//             </span>");

//     description = $"<scroll-description><p>{scroll.description}</p><div id='legacySlots'>{String.Join("", factSlots)}</div></scroll-description>";
// }