Need help debugging a livebook Smartcell

[lmletham]

Hey guys!

I’m working on a smartcell that I can use in livebook as I learn elixir to write myself practice problems. Almost everything is working…I just have one bug I can’t seem to quash.

I will provide my smartcell code below, but please forgive any ugliness. This is early days on elixir for me and I know for a fact my javascript is poor haha.

Background

There are two use cases for my homework smartcell.

Type 1: A very simple problem where the user only needs to input text:

This is working as intended.

Type 2: Any problems that are more complicated, where the user is supposed to write code in an elixir cell. On these problems, the user should not see the input box of type 1, since we only want them typing their answer/code into an elixir cell.

So on the smartcell, I go to “edit” and change the “Problem Type” to “elixir”.

In my Javascript, the DisplayContent function has some if statements which use problem_type to selectively hide the user input box. So if problem_type = elixir the input box is hidden. And we can see that it works! Now the smartcell does not have the input box below the problem statement, and looks like this:

In this case, the user misspells “atom”, and is given feedback to try again.

The Bug

So it seems like everything is working…I change the Problem Type to elixir and hit save, and the input box is hidden, but when I then click on the “Problem Statement” tab again the input box pops back up even though I have not changed the Problem Type at all.

I think my problem_type variable is being overwritten, or not updated, or I’m failing to pass something correctly between my elixir and JS when I refresh, etc. I’ve tried a lot of things, but nothing has fixed it. I’d appreciate any insight or tips.

Useful Links

In case my screenshots were not clear, I made a quick demo video to show what the intended behavior is, and how the input box is popping back in when the Problem Statement tab is clicked.

And because this is livebook, I will try to add a badge here so that anyone can just run my code:

In case the badge doesn’t work, here is my code:

My Startup Cell:

Mix.install([
  {:kino, "~> 0.13.2"},
  {:earmark, "~> 1.4.47"},
  {:makeup, "~> 1.1"},
  {:makeup_elixir, "~> 0.7"},
])

My Smartcell Code

defmodule Hwsmartcell do
  use Kino.JS
  use Kino.JS.Live
  use Kino.SmartCell, name: "Homework Smartcell"

  @impl true
  def init(attrs, ctx) do
    problem_number = attrs["problem_number"] || "1"
    problem_type = attrs["problem_type"] || "text"
    problem_statement = attrs["problem_statement"] || """
    What is this data type?
    ```elixir
    :tbd
    ```
    """
    hint = attrs["hint"] || "Try breaking the problem into smaller parts."
    solution = attrs["solution"] || "Atom"
    correct_answer = attrs["correct_answer"] || ""
    test_code = attrs["test_code"] || ""

    # Process the problem statement with Makeup
    rendered_problem_statement = process_with_makeup(problem_statement)
    rendered_hint = process_with_makeup(hint)
    rendered_solution = process_with_makeup(solution)

    # Generate the Makeup CSS
    makeup_css = makeup_stylesheet()

    ctx = assign(ctx,
     problem_number: problem_number,
     problem_type: problem_type,
     problem_statement: rendered_problem_statement,
     hint: rendered_hint,
     solution: rendered_solution,
     correct_answer: correct_answer,
     test_code: test_code,
     makeup_css: makeup_css
    )

    {:ok, ctx}
  end

  @impl true
  def handle_connect(ctx) do
    {:ok, %{
      problem_number: ctx.assigns.problem_number,
      problem_type: ctx.assigns.problem_type,
      problem_statement: ctx.assigns.problem_statement,
      hint: ctx.assigns.hint,
      solution: ctx.assigns.solution,
      correct_answer: ctx.assigns.correct_answer,
      makeup_css: ctx.assigns.makeup_css
    }, ctx}
  end

  @impl true
  def to_attrs(ctx) do
    %{
      "problem_number" => ctx.assigns.problem_number,
      "problem_type" => ctx.assigns.problem_type,
      "problem_statement" => ctx.assigns.problem_statement,
      "hint" => ctx.assigns.hint,
      "solution" => ctx.assigns.solution,
      "correct_answer" => ctx.assigns.correct_answer,
      "test_code" => ctx.assigns.test_code
    }
  end

  @impl true
  def to_source(attrs) do
    """
    #Problem_Number:
    _ = "#{attrs["problem_number"]}"

    #Problem_Statement:
    _ = ~s#{inspect(attrs["problem_statement"], raw: true)}

    #Hint:
    _ = ~s#{inspect(attrs["hint"], raw: true)}

    #Solution:
    _ = ~s#{inspect(attrs["solution"], raw: true)}

    #Correct Answer:
    _ = ~s#{inspect(attrs["correct_answer"], raw: true)}

    #Test Code:
    _ = #{attrs["test_code"]}
    """
  end


  @impl true
  def handle_event("check_answer", %{"input_value" => input_value}, ctx) do
    feedback =
      if String.downcase(String.trim(input_value)) == String.downcase(String.trim(ctx.assigns.correct_answer)) do
        %{"message" => "Correct!", "color" => "text-green-500"}
      else
        %{"message" => "Try again!", "color" => "text-red-500"}
      end

    broadcast_event(ctx, "feedback", feedback)
    {:noreply, ctx}
  end

  @impl true
  def handle_event("save_edits", %{
    "problem_number" => problem_number,
    "problem_type" => problem_type,
    "problem_statement" => problem_statement,
    "hint" => hint,
    "solution" => solution,
    "correct_answer" => correct_answer,
    "test_code" => test_code
  }, ctx) do
    ctx = assign(ctx,
    problem_number: problem_number,
    problem_type: problem_type,
    problem_statement: problem_statement,
    hint: hint,
    solution: solution,
    correct_answer: correct_answer,
    test_code: test_code
  )

    # Process the text with Makeup
    rendered_problem_statement = process_with_makeup(problem_statement)
    rendered_hint = process_with_makeup(hint)
    rendered_solution = process_with_makeup(solution)


    # Send the rendered HTML and CSS to the client-side for display
    broadcast_event(ctx, "refresh", %{
      problem_number: problem_number,
      problem_type: problem_type,
      problem_statement: rendered_problem_statement,
      hint: rendered_hint,
      solution: rendered_solution,
      correct_answer: correct_answer,
      test_code: test_code,
      makeup_css: ctx.assigns.makeup_css
    })

    {:noreply, ctx}
  end

  defp process_with_makeup(text) do
    # Use a regex to find code blocks between ```elixir and ``` delimiters
    Regex.replace(~r/```elixir\n(.+?)\n```/s, text, fn _match, code ->
      # Apply syntax highlighting
      highlighted_code = Makeup.highlight(code, lexer: Makeup.Lexers.ElixirLexer)

      # Perform a safe string replacement for function names and keywords
      highlighted_code
      |> String.replace(~r/(?<=[^a-zA-Z0-9_])puts(?=[^a-zA-Z0-9_])/, ~s(<span class="nf">puts</span>))
      |> String.replace(~r/(?<=[^a-zA-Z0-9_])answer(?=[^a-zA-Z0-9_])/, ~s(<span class="nf">answer</span>))
      |> (fn hc -> "<pre><code class=\"highlight\">#{hc}</code></pre>" end).()
    end)
  end


  defp makeup_stylesheet do
    """
    .highlight .hll { background-color: #111827; }
    .highlight { color: #e7e9db; background-color: #111827; }

    pre {
        border-radius: 0.5rem;
        margin-top: 0.2rem;
        margin-bottom: 0;
        padding: 1rem;
    }

    .highlight .unselectable {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Built-in pseudo elements */
    .highlight .bp { color: #e7e9db; }

    /* Comments */
    .highlight .c { color: #8c92a3 !important; }
    .highlight .c * { color: #8c92a3 !important; }
    .highlight .c1 { color: #8c92a3 !important; }
    .highlight .c1 * { color: #8c92a3 !important; }
    .highlight .ch { color: #8c92a3 !important; }
    .highlight .ch * { color: #8c92a3 !important; }
    .highlight .cm { color: #8c92a3 !important; }
    .highlight .cm * { color: #8c92a3 !important; }
    .highlight .cp { color: #8c92a3 !important; }
    .highlight .cp * { color: #8c92a3 !important; }
    .highlight .cpf { color: #8c92a3 !important; }
    .highlight .cpf * { color: #8c92a3 !important; }
    .highlight .cs { color: #8c92a3 !important; }
    .highlight .cs * { color: #8c92a3 !important; }

    /* String Delimiters */
    .highlight .dl { color: #98c379; }

    /* Errors */
    .highlight .err { color: #ef6155; }

    /* Function magic */
    .highlight .fm { color: #06b6ef; }

    /* Generic styles */
    .highlight .gd { color: #ef6155; }
    .highlight .ge { font-style: italic; }
    .highlight .gh { color: #e7e9db; font-weight: bold; }
    .highlight .gi { color: #61afef; }
    .highlight .gp { color: #8c92a3; font-weight: bold; }
    .highlight .gs { font-weight: bold; }
    .highlight .gu { color: #5bc4bf; font-weight: bold; }

    /* Numbers */
    .highlight .il { color: #61afef; }
    .highlight .k { color: #c678dd; } /* Keywords */
    .highlight .kc { color: #c678dd; } /* Keyword constant */
    .highlight .kd { color: #c678dd; } /* Keyword declaration */
    .highlight .kn { color: #5bc4bf; } /* Keyword namespace */
    .highlight .kp { color: #c678dd; } /* Keyword pseudo */
    .highlight .kr { color: #c678dd; } /* Keyword reserved */
    .highlight .kt { color: #fec418; } /* Keyword type */

    /* Literals */
    .highlight .l { color: #61afef; }
    .highlight .ld { color: #61afef; }

    /* Numbers */
    .highlight .m { color: #61afef; }
    .highlight .mb { color: #61afef; }
    .highlight .mf { color: #61afef; }
    .highlight .mh { color: #61afef; }
    .highlight .mi { color: #61afef; }
    .highlight .mo { color: #61afef; }

    /* Names */
    .highlight .n { color: #e7e9db; }
    .highlight .na { color: #06b6ef; } /* Name attribute */
    .highlight .nb { color: #e7e9db; } /* Name built-in */
    .highlight .nc { color: #56b6c2; } /* Name class - Updated color */
    .highlight .nd { color: #d19a66; } /* Name decorator */
    .highlight .ne { color: #ef6155; } /* Name exception */
    .highlight .nf { color: #61afef; } /* Name function */
    .highlight .ni { color: #e7e9db; } /* Name entity */
    .highlight .nl { color: #61afef; } /* Name label */
    .highlight .nn { color: #56b6c2; } /* Name namespace - Updated color */
    .highlight .no { color: #61afef; } /* Name constant */
    .highlight .nt { color: #d19a66; } /* Name tag */
    .highlight .nv { color: #ef6155; } /* Name variable */
    .highlight .nx { color: #61afef; } /* Name other */

    /* Operators */
    .highlight .o { color: #d19a66; }
    .highlight .ow { color: #d19a66; }

    /* Punctuation */
    .highlight .p { color: #e7e9db; }

    /* Properties */
    .highlight .py { color: #e7e9db; }

    /* Strings */
    .highlight .s { color: #98c379; }
    .highlight .s1 { color: #98c379; }
    .highlight .s2 { color: #98c379; }
    .highlight .sa { color: #98c379; }
    .highlight .sb { color: #98c379; }
    .highlight .sc { color: #e7e9db; }
    .highlight .sd { color: #776e71; }
    .highlight .se { color: #f99b15; }
    .highlight .sh { color: #98c379; }
    .highlight .si { color: #f99b15; }
    .highlight .sr { color: #98c379; }
    .highlight .ss { color: #61afef; }
    .highlight .sx { color: #61afef; } /* String other, also used for sigils */

    /* Variables */
    .highlight .vc { color: #ef6155; } /* Variable class */
    .highlight .vg { color: #ef6155; } /* Variable global */
    .highlight .vi { color: #ef6155; } /* Variable instance */
    .highlight .vm { color: #ef6155; } /* Variable magic */
    .highlight .vn { color: #ef6155; } /* Variable namespace */
    .highlight .vq { color: #ef6155; } /* Variable pseudo */
    .highlight .vs { color: #ef6155; } /* Variable special */
    .highlight .w { color: #e7e9db; } /* Whitespace */
    """
  end

  asset "main.js" do
    """
    export function init(ctx, payload) {
      // Include Tailwind CSS
      const tailwindLink = document.createElement("link");
      tailwindLink.rel = "stylesheet";
      tailwindLink.href = "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css";
      document.head.appendChild(tailwindLink);
  
      // Include Makeup CSS from the payload
      const makeupStyle = document.createElement("style");
      makeupStyle.textContent = payload.makeup_css || '';
      document.head.appendChild(makeupStyle);
  
      ctx.root.innerHTML = `
        <style>
          pill {
            display: inline-block;
            padding: 0.1rem 0.5rem;
            border-radius: 0.5rem;
            background-color: #e2e8f0;
            color: #000000;
            font-size: 1rem;
            line-height: 1.25rem;
            font-family: JetBrains Mono, monospace;
          }
        </style>
  
        <section id="main_section" class="bg-gray-100 p-4 rounded-md relative" style="display:block;">
          <button id="edit_button" class="absolute top-2 right-2 bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600">Edit</button>
          <h2 id="header" class="text-2xl font-bold mb-4">Problem ${payload.problem_number}</h2>
          <div id="tabs" class="border-b border-gray-300 mb-4 flex">
            <button id="problem_tab" class="tab_button text-blue-500 font-bold border-b-2 border-blue-500 py-2 px-4">Problem Statement</button>
            <button id="hint_tab" class="tab_button text-gray-500 py-2 px-4">Hint</button>
            <button id="solution_tab" class="tab_button text-gray-500 py-2 px-4">Solution</button>
          </div>
          <div id="content" class="mt-4 p-4 bg-white rounded-md shadow-md">${payload.problem_statement}</div>
          <div id="input_section" class="mt-4"></div>
          <div id="feedback" class="mt-4 font-bold"></div>
        </section>
  
        <section id="edit_section" class="bg-white p-4 rounded-md hidden" style="display:none;">
          <h2 class="text-xl font-bold mb-4">Edit Problem</h2>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="problem_number">Problem Number</label>
            <input type="text" id="problem_number" class="w-full p-2 border border-gray-300 rounded-md" value="${payload.problem_number}">
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="problem_type">Problem Type</label>
            <select id="problem_type" class="w-full p-2 border border-gray-300 rounded-md">
              <option value="text" ${payload.problem_type === 'text' ? 'selected' : ''}>Text</option>
              <option value="elixir" ${payload.problem_type === 'elixir' ? 'selected' : ''}>Elixir</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="problem_statement">Problem Statement</label>
            <textarea id="problem_statement" rows="6" class="w-full p-2 border border-gray-300 rounded-md">${payload.problem_statement}</textarea>
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="hint">Hint</label>
            <textarea id="hint" rows="4" class="w-full p-2 border border-gray-300 rounded-md">${payload.hint}</textarea>
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="solution">Solution</label>
            <textarea id="solution" rows="4" class="w-full p-2 border border-gray-300 rounded-md">${payload.solution}</textarea>
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="correct_answer">Correct Answer</label>
            <input type="text" id="correct_answer" class="w-full p-2 border border-gray-300 rounded-md" value="${payload.correct_answer}">
          </div>
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="test_code">Test Code</label>
            <textarea id="test_code" rows="6" class="w-full p-2 border border-gray-300 rounded-md">${payload.test_code || ''}</textarea>
          </div>
          <button id="save_button" class="mt-2 p-2 bg-blue-500 text-white rounded-md">Save</button>
        </section>
      `;
  
      const problemTab = ctx.root.querySelector("#problem_tab");
      const hintTab = ctx.root.querySelector("#hint_tab");
      const solutionTab = ctx.root.querySelector("#solution_tab");
      const content = ctx.root.querySelector("#content");
      const inputSection = ctx.root.querySelector("#input_section");
      const feedbackSection = ctx.root.querySelector("#feedback");
      const editButton = ctx.root.querySelector("#edit_button");
      const editSection = ctx.root.querySelector("#edit_section");
      const mainSection = ctx.root.querySelector("#main_section");
  
      const tabs = {
        "problem_statement": payload.problem_statement,
        "hint": payload.hint,
        "solution": payload.solution
      };
  
      // Add Tab listeners 
      problemTab.addEventListener("click", () => displayContent("problem_statement", problemTab, payload.problem_type));
      hintTab.addEventListener("click", () => displayContent("hint", hintTab, payload.problem_type));
      solutionTab.addEventListener("click", () => displayContent("solution", solutionTab, payload.problem_type));
      
  
  
      function displayContent(tab, activeTab, arg) {
        content.innerHTML = tabs[tab];
  
        // Update active class
        document.querySelectorAll(".tab_button").forEach(btn => {
          btn.classList.remove("text-blue-500", "font-bold", "border-b-2", "border-blue-500");
          btn.classList.add("text-gray-500");
        });
        activeTab.classList.add("text-blue-500", "font-bold", "border-b-2", "border-blue-500");
        activeTab.classList.remove("text-gray-500");
  
        // Display input only on the Problem Statement tab
        if (tab === "problem_statement" && arg ==="text") {
          inputSection.innerHTML = `
            <input type="text" id="text_input" class="w-full p-2 border border-gray-300 rounded-md" placeholder="Type your answer here...">
            <button id="submit_button" class="mt-2 p-2 bg-blue-500 text-white rounded-md">Submit</button>
          `;
  
          const textInput = document.getElementById('text_input');
          const submitButton = document.getElementById('submit_button');
  
          // Event listener for the submit button
          submitButton.addEventListener("click", () => {
            const inputValue = textInput.value;
            ctx.pushEvent("check_answer", { input_value: inputValue });
          });
  
          // Event listener for the "Enter" key press
          textInput.addEventListener("keydown", (event) => {
            if (event.key === "Enter") {
              event.preventDefault(); // Prevent form submission or other default behavior
              submitButton.click(); // Trigger the submit button click
            }
          });
        } else {
          inputSection.innerHTML = ""; // Clear the input section on other tabs
        }
      }
  
  
      displayContent("problem_statement", problemTab, payload.problem_type); // Show the problem statement by default LML
  
      // Edit button logic
      editButton.addEventListener("click", () => {
        mainSection.style.display = mainSection.style.display === "none" ? "block" : "none";
        editSection.style.display = editSection.style.display === "none" ? "block" : "none";
      });
  
      // Save button logic
      document.getElementById('save_button').addEventListener('click', () => {
        const problemNumber = document.getElementById('problem_number').value;
        const problemType = document.getElementById('problem_type').value;
        const problemStatement = document.getElementById('problem_statement').value;
        const hint = document.getElementById('hint').value;
        const solution = document.getElementById('solution').value;
        const correctAnswer = document.getElementById('correct_answer').value;
        const testCode = document.getElementById('test_code').value;
  
  
        ctx.pushEvent('save_edits', {
          problem_number: problemNumber,
          problem_type: problemType,
          problem_statement: problemStatement,
          hint: hint,
          solution: solution,
          correct_answer: correctAnswer,
          test_code: testCode,
        });
  
        // Switch back to view mode
        mainSection.style.display = mainSection.style.display === "none" ? "block" : "none";
        editSection.style.display = editSection.style.display === "none" ? "block" : "none";
      });
  
      // Handle feedback events
      ctx.handleEvent("feedback", ({ message, color }) => {
        feedbackSection.textContent = message;
        feedbackSection.className = `mt-4 font-bold ${color}`;
      });
  
      ctx.handleEvent("refresh", (payload) => {
        // Update the payload
        payload.problem_number = payload.problem_number;
        payload.problem_type = payload.problem_type;
        payload.correct_answer = payload.correct_answer;
        payload.test_code = payload.test_code;
  
        // Update the header
        document.getElementById('header').textContent = `Problem ${payload.problem_number}`;
  
        // Update the tabs with the new content
        tabs["problem_statement"] = payload.problem_statement;
        tabs["hint"] = payload.hint;
        tabs["solution"] = payload.solution;
  
        // Re-display the current tab content
        displayContent("problem_statement", problemTab, payload.problem_type);
  
      });
    }
    """
  end
end

#Ensure the smartcell is registered
Kino.SmartCell.register(Hwsmartcell)

[jonatanklosko]

The issue is here:

ctx.handleEvent("refresh", (payload) => {
  // Update the payload
  payload.problem_number = payload.problem_number;
  payload.problem_type = payload.problem_type;
  payload.correct_answer = payload.correct_answer;
  payload.test_code = payload.test_code;
  // ...

The assignments don’t do anything, because you are shadowing the original payload by the anonymous function argument payload : )

[lmletham]

Thanks for the tip Jonatan! You’re totally right about that code. I fixed it and did this instead:

      ctx.handleEvent("refresh", (payload) => {
        // Update the header
        document.getElementById('header').textContent = `Problem ${payload.problem_number}`;

        // Update the problem type 
        document.getElementById('problem_type').value = payload.problem_type;
  
        // Update the tabs with the new content
        tabs["problem_statement"] = payload.problem_statement;
        tabs["hint"] = payload.hint;
        tabs["solution"] = payload.solution;
  
        // Re-display the current tab content
        displayContent("problem_statement", problemTab, payload.problem_type);
  
      });

Unfortunately, the problem must be either separate or deeper than that, because stripping that bad section out didn’t fix the issue.

Something that I noticed just now as I was testing is that the value in my elixir init function seems to matter a lot.

problem_type = attrs["problem_type"] || "text"

When I have problem_type initialized to “text” the input box keeps appearing when it shouldn’t, and vice versa when I have problem_type initialized to “elixir” it doesn’t appear when it should.

Almost as if it is never getting assigned any values at all except for the initial one? But I’m not why that would be the case when other values seem to be working fine. For example, I don’t have any issues with problem_number

Does it mean that my init function (either javascript or elixir) is being run multiple times? If so, why am I not seeing more issues?

Alternatively? Did I just mess up the if statement logic in displayContent?

 function displayContent(tab, activeTab, problemType) {
        content.innerHTML = tabs[tab];
  
        // Update active class
        document.querySelectorAll(".tab_button").forEach(btn => {
          btn.classList.remove("text-blue-500", "font-bold", "border-b-2", "border-blue-500");
          btn.classList.add("text-gray-500");
        });
        activeTab.classList.add("text-blue-500", "font-bold", "border-b-2", "border-blue-500");
        activeTab.classList.remove("text-gray-500");
  
        // Display input only on the Problem Statement tab
        if (tab === "problem_statement" && problemType === "text") {
          inputSection.innerHTML = `
            <input type="text" id="text_input" class="w-full p-2 border border-gray-300 rounded-md" placeholder="Type your answer here...">
            <button id="submit_button" class="mt-2 p-2 bg-blue-500 text-white rounded-md">Submit</button>
          `;
  
          const textInput = document.getElementById('text_input');
          const submitButton = document.getElementById('submit_button');
  
          // Event listener for the submit button
          submitButton.addEventListener("click", () => {
            const inputValue = textInput.value;
            ctx.pushEvent("check_answer", { input_value: inputValue });
          });
  
          // Event listener for the "Enter" key press
          textInput.addEventListener("keydown", (event) => {
            if (event.key === "Enter") {
              event.preventDefault(); // Prevent form submission or other default behavior
              submitButton.click(); // Trigger the submit button click
            }
          });
        } else {
          inputSection.innerHTML = ""; // Clear the input section on other tabs
        }
      }

[jonatanklosko]

I think what you intended initially was correct, you just need to use different names, as in:

ctx.handleEvent("refresh", (newPayload) => {
  // Update the payload
  payload.problem_number = newPayload.problem_number;
  payload.problem_type = newPayload.problem_type;
  payload.correct_answer = newPayload.correct_answer;
  payload.test_code = newPayload.test_code;
  // ...

[lmletham]

You’re the best! That fixed it! I need to do more JS obviously haha. Thanks so much for helping me.