lmletham
Need help debugging a livebook Smartcell
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)
Marked As Solved
jonatanklosko
Creator of Livebook
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;
// ...
Also Liked
lmletham
You’re the best! That fixed it! I need to do more JS obviously haha. Thanks so much for helping me.
1
Popular in Questions
In Ruby, I can go:
User.find_by(email: "foobar@email.com").update(email: "hello@email.com")
How can I do something similar in Elixir? ...
New
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
Hi there,
I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New
Good day to you all.
I have been struggling to get a query involving like and ilike to work.
Can anyone assist me on this, please?
pro...
New
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
I will often find my self writing things similar to:
case some_value do
nil -> something()
"" -> something()
_ -> someth...
New
Expanding on this topic: https://forum.elixirforum.net/t/map-typespec-question/19217
Let’s say I have a map with required and optional k...
New
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
Other popular topics
Hello, I get Persian date from my client and convert it to normal calendar like this:
def jalali_string_to_miladi_english_number(persi...
New
Hello all!
I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this:
...
New
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine)
This is a plugin that adds support for Elixir to JetBrains IntelliJ...
New
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this
"1000"
What is the ...
New
I tried installing
elixir 1.11.2
erlang 23.3.4
via asdf in my zsh shell. Enabled the versions locally and globally.
When I list them ...
New
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
Hello guys,
I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
Latest Livebook Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"