Upload 2025 files

Procfile

@@ -0,0 +1 @@
+web: python app.py

README.md

@@ -1,10 +1,14 @@
 ---
-title: Interactive Explanation Experiment
-emoji: 📚
-colorFrom: yellow
-colorTo: pink
-sdk: docker
+title: Interactive Llm Xai
+emoji: 🌍
+colorFrom: pink
+colorTo: blue
+sdk: gradio
+sdk_version: 5.22.0
+app_file: app.py
 pinned: false
+license: mit
+short_description: interactive-llm-xai
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,693 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*- 
+"""
+Evaluation back-end for the “interactive-graph” interface on Hugging Face Spaces
+───────────────────────────────────────────────────────────────────────────────
+* Serves all evaluation UIs (`/eval_interfaces/<option>`).
+* Transparently patches every explanation HTML so you never touch the originals:
+    ▸ layout / badge / telemetry tweaks (unchanged)  
+    ▸ **NEW** helper that counts steps and answers the parent’s
+      `xai-get-step-count`, so the prompt shows “1 – N”.
+* **DEBUG MODE** (toggle with `ICOT_DEBUG=1`) prints:
+    ▸ every file request + whether it was patched  
+    ▸ console-side step counts inside each iframe.
+* Persists results to CSV / JSON and can push them to
+  `LLM-XAI/interactive-COT-data` if `ICOT_TOKEN` is set.
+"""
+
+import os, csv, json, uuid, logging
+from datetime       import datetime
+from pathlib        import Path
+from flask          import (
+    Flask, abort, Response, send_file, request,
+    url_for, render_template_string, jsonify
+)
+from huggingface_hub import HfApi, login
+import re                           # ← add near other imports
+from datasets import load_dataset
+import random
+
+# ──────────────────────────  SET THE COUNTERS  ──────────────────────
+MAX_USERS = 50
+COT_COUNTER_FILE = "regular_cot_counter.txt"
+GRAPH_COUNTER_FILE = "graph_counter.txt"
+CODE_COUNTER_FILE = "code_counter.txt"
+NATURAL_LANG_COUNTER_FILE = "natural_lang_counter.txt"
+
+
+SELECTED_CARD = "graph"
+
+def get_submit_counter(file_path:str) -> int:
+    with open(file_path, 'r') as f:
+        try:
+            val = int(f.read().strip())
+        except ValueError:
+            val = 0
+    return val
+
+def increment_submit_counter(file_path:str) -> int:
+    with open(file_path, 'r+') as f:
+        current = get_submit_counter(file_path)
+        new_value = (current+1) % (MAX_USERS+1)
+        if new_value == 0:
+            new_value = 1
+        f.seek(0)
+        f.write(str(new_value))
+        f.truncate()
+    return new_value
+
+    
+def increment_submit_counter_absolute(file_path:str) -> int:
+    with open(file_path, 'r+') as f:
+        current = get_submit_counter(file_path)
+        new_value = current+1 
+        f.seek(0)
+        f.write(str(new_value))
+        f.truncate()
+    return new_value
+
+def get_the_min_interface() -> str: 
+    # format_dict = {"interactive_coding_explanations": "code", "interactive_graph_explanations": "graph", "interactive_nat_lang_explanations": "inl","traditional_cot_explanations": "cot"}
+    # ds = load_dataset("Miles1999/interactive-COT-data")
+    # train_df = ds["train"].to_pandas()
+    # train_df['interface_type'] = train_df['samples'].apply(get_interface_format)
+    # counts = train_df['interface_type'].value_counts()
+    # log.info(counts)
+    # min_count = counts.min()
+    # # Find all formats that have this minimum count
+    # min_formats = counts[counts == min_count].index.tolist()
+    # log.info("min formats:")
+    # log.info(min_formats)
+    # # Pick one randomly if more than one
+    # chosen_format = random.choice(min_formats)
+    # log.info("chosen format:")
+    # log.info(chosen_format)
+    # return format_dict[chosen_format]
+    format_lst= ["code", "graph", "inl","cot"]
+    chosen_format = random.choice(format_lst)
+    return chosen_format
+
+# this function extract the interface format from the sample path
+def get_interface_format(sample_list):
+    file_path = sample_list[0].get("file", "")
+    parts = file_path.split("eval_interfaces/")
+    if len(parts) > 1:
+        return parts[1].split("/")[0]  # the folder after eval_interfaces/
+    return None
+
+# ──────────────────────────  GLOBAL DEBUG FLAG  ──────────────────────
+DEBUG_MODE = os.getenv("ICOT_DEBUG", "0") != "0"
+
+logging.basicConfig(
+    level=logging.DEBUG if DEBUG_MODE else logging.INFO,
+    format="%(asctime)s | %(levelname)-8s | %(message)s"
+)
+log = logging.getLogger(__name__)
+log.info("Debug mode: %s", DEBUG_MODE)
+
+# ─────────────────────────────  CONFIG  ──────────────────────────────
+HF_TOKEN = os.getenv("ICOT_TOKEN")          # set in Space → Settings → Secrets
+if HF_TOKEN:
+    login(token=HF_TOKEN)
+else:
+    log.warning("ICOT_TOKEN not set – results will stay local")
+
+HF_REPO   = "Miles1999/interactive-COT-data"
+HF_FOLDER = "session_logs"
+
+CODEBASE_DIR = "."
+EVAL_PAGES = {
+    "cot"              : "evaluation/eval_interfaces/reg_cot_eval_interface.html",
+    "interactive_nl"   : "evaluation/eval_interfaces/nl_eval_interface.html",
+    "interactive_code" : "evaluation/eval_interfaces/coding_eval_interface.html",
+    "interactive_graph": "evaluation/eval_interfaces/graph_eval_interface.html",
+}
+ALLOWED_ROOTS = ["html_explanations", "evaluation"]
+
+CSV_FILENAME = "evaluation_stats.csv"
+CSV_PATH     = Path(CSV_FILENAME).resolve()
+CSV_HEADER   = [
+    "timestamp","session_id","user_name",
+    "overallAccuracy(%)","correctItemAccuracy(%)","incorrectItemAccuracy(%)",
+    "avgTimeCorrect","avgTimeIncorrect",
+]
+
+SESSION_DIR = Path("/tmp/sessions")
+SESSION_DIR.mkdir(parents=True, exist_ok=True)
+
+
+
+# ─────────────────────────────  HELPERS  ─────────────────────────────
+def gen_session_id() -> str:
+    return str(uuid.uuid4())
+
+def save_session_local(sid: str, data: dict) -> Path:
+    path = SESSION_DIR / f"{sid}.json"
+    path.write_text(json.dumps(data, indent=2))
+    log.info("Stored session JSON → %s", path)
+    return path
+
+def push_to_hf(local_path: Path, sid: str):
+    try:
+        HfApi().upload_file(
+            path_or_fileobj=str(local_path),
+            path_in_repo=f"{HF_FOLDER}/{local_path.name}",
+            repo_id=HF_REPO,
+            repo_type="dataset",
+        )
+        local_path.unlink()
+        log.info("Uploaded session %s to HF & removed local copy", sid)
+    except Exception as e:
+        log.warning("HF upload failed for %s : %s", sid, e)
+
+# ──────────────────────────  HTML PATCHING  ──────────────────────────
+INJECT_STYLE = """
+<style>
+/* layout tweak: 40 / 60 split */
+.left-panel { width:40%!important }
+.right-panel{ width:60%!important }
+
+/* hide “Variables” pane */
+.variables-container{display:none!important}
+.explanation-container{flex:1!important;height:auto!important}
+/* numbered badge next to each step */
+.step{display:none;align-items:center;gap:12px}
+.step.shown{display:flex}
+.step-content,.step>*:first-child{flex:1}
+.badge{
+  flex-shrink:0;color:#adadad;font-size:1.7rem;
+  font-weight:700;padding:4px 14px;border-radius:16px;pointer-events:none;
+}
+
+/* ── eliminate blank space in Problem Statement ──────────────────── */
+.problem-statement{
+  /* let the section size itself */
+  height:auto!important;           /* overrides 50 % */
+  flex:0 0 auto!important;         /* occupy only the space it needs */
+  padding:20px!important;          /* keep your original insets */
+  overflow-y:visible!important;    /* scroll not usually needed here */
+}
+
+.problem-understanding{
+  /* fill everything that’s left */
+  flex:1 1 auto!important;         /* grow/shrink with column */
+  height:auto!important;           /* overrides 50 % */
+  overflow-y:auto!important;       /* still scroll if content is long */
+}
+
+/* tidy up internal spacing */
+.problem-statement p{
+  margin:0!important;
+  line-height:1.4!important;
+}
+.section-title{
+  margin-bottom:8px!important;
+  padding-bottom:3px!important;
+}
+
+/* ── eliminate per‑line margins in the Summary panel ─────────────── */
+.problem-understanding .variable-item,
+.problem-understanding p,
+.problem-understanding li {
+    margin: 0 !important;      /* no extra vertical gap */
+    padding: 0 !important;     /* align text to the left edge */
+}
+
+/* ── make every control button solid black ── */
+.btn,
+.btn-play-pause,
+.btn-stop,
+.btn-prev,
+.btn-next,
+.btn-correct,
+.btn-wrong{
+    background: #000 !important;   /* black fill */
+    color: #fff !important;        /* white text so it stays readable */
+    border: none !important;       /* ensure no colored borders peek through */
+}
+
+.btn:hover {                       /* keep hover subtle */
+    opacity: 0.9 !important;
+}
+
+/* if you dim disabled buttons, keep them grey */
+.btn.disabled {
+    background: #6c6c6c !important;
+    color: #fff !important;
+}
+
+/* Natural‑language & graph explanations (.step.active) */
+.step.active             {                       /* remove yellow fill   */
+  background: transparent !important;
+  border: 2px solid #ffd700 !important;          /* gold border          */
+  padding-left: 10px !important;                 /* keep text indented   */
+}
+.code-line.current      {
+    background: transparent !important;
+    border: 2px solid #ffd700 !important;
+    padding-left: 8px !important;
+}
+.step.active::before { display: none !important; } /* hide blinking dot */
+
+/* disable clicking */
+.step{
+  pointer-events:none !important;   /* clicks, hovers, etc. are ignored   */
+  cursor: default !important;       /* arrow cursor instead of pointer    */
+}
+/* Do not bold the formula*/
+.formula {
+    font-weight: normal;
+    margin: 5px 0;
+    }
+
+
+</style>
+"""
+
+# ── Original helper (rename heading, add badges, telemetry) ──────────
+INJECT_SCRIPT_BASE = """
+<script>
+
+document.addEventListener('DOMContentLoaded', ()=>{
+
+    /* 1. optional: hide the download button in outer pages */
+    const dl = document.getElementById('download-btn');
+    if (dl) dl.remove();            // safe even if not present
+
+    /* 2. rename headings */
+    const h = document.querySelector('.problem-understanding .section-title');
+    if (h) h.textContent = 'Summary';
+    const q = document.querySelector('.problem-statement .section-title');
+    if (q) q.textContent = 'Question';
+  
+    /* 3. “Goal” wording */
+    // Case 1: <div class="what-to-find"><h4>...</h4>
+    const goalH4 = document.querySelector('.what-to-find h4');
+    if (goalH4) {
+      goalH4.textContent = 'Goal:';
+    }
+    
+    // Case 2: standalone <h3>What we need to find
+    const goalH3 = document.querySelector('.problem-understanding h3');
+    if (goalH3 && /what we need to find/i.test(goalH3.textContent)) {
+      goalH3.textContent = 'Goal:';
+    }
+
+    /* 5. remove the formula if there is one */
+    const stepContents = document.querySelectorAll('.step-content');
+    stepContents.forEach(step => {
+        let currentNode = step.firstChild;
+        const formulaDiv = step.querySelector('.formula');
+        while (currentNode && currentNode !== formulaDiv) {
+            if (/[+\-*/=]/.test(currentNode.textContent)){
+                if(formulaDiv){
+                    let next = formulaDiv.nextSibling;
+                    while (next) {
+                        const toRemove = next;
+                        next = next.nextSibling;
+                        step.removeChild(toRemove);
+                        formulaDiv.textContent = "";
+                    }
+                }
+                break;
+            }
+            currentNode = currentNode.nextSibling;
+        }
+    });
+   
+
+    /* 4. decorate & reveal steps */
+    const steps = [...document.querySelectorAll('.step')];
+    steps.forEach((s, i) => {
+        const wrap = document.createElement('div');
+        wrap.className = 'step-content';
+        while (s.firstChild) wrap.appendChild(s.firstChild);
+        s.appendChild(wrap);
+    
+        // Add badge for all steps except the last one
+        if (i < steps.length - 1) {
+            const badge = document.createElement('span');
+            badge.className = 'badge';
+            badge.textContent = '' + (i + 1);
+            s.appendChild(badge);
+        }
+    });
+    if (steps.length) {
+        steps[0].classList.add('active', 'shown');
+        window.currentStepIndex = 0;
+    }
+    
+    
+
+    /* cumulative reveal on highlight change */
+    const sync = ()=>{
+    const idx=steps.findIndex(el=>el.classList.contains('active'));
+    steps.forEach((el,i)=>el.classList.toggle('shown',i<=idx));
+    };
+    sync();
+    const obs=new MutationObserver(sync);
+    steps.forEach(el=>obs.observe(el,{attributes:true,attributeFilter:['class']}));
+    
+    /* click telemetry */
+    const post = key => window.parent?.postMessage({type:'xai-click',key},'*');
+    const map  = {playPauseBtn:'play',stopBtn:'stop',nextBtn:'next',prevBtn:'prev'};
+    Object.entries(map).forEach(([id,key])=>{
+    const btn=document.getElementById(id);
+    if (btn) btn.addEventListener('click',()=>post(key),{capture:true});
+    });
+    /*  Number only executable lines (i.e. lines *without* the .comment span). */
+    (function renumberCodeLines(){
+    const codeLines = document.querySelectorAll('.code-line');
+    let n = 0;
+    codeLines.forEach(cl=>{
+      const numSpan = cl.querySelector('.line-number');
+      if(!numSpan) return;                        // safety check
+      if(cl.querySelector('.comment')){           // comment line
+        numSpan.textContent = '';                 // blank → hides via :empty
+      }else{                                      // real code
+        numSpan.textContent = ++n;
+      }
+    });
+    })();
+    
+    });
+
+</script>
+"""
+
+# ── NEW helper: answers “How many steps?” for the outer UI ───────────
+INJECT_STEPCOUNT = """
+<script>
+/* Counts steps and answers parent page’s xai-get-step-count query */
+(function(){
+  function countSteps(){
+    /* Case 1: explicit JSON */
+    if(typeof problemData==='object'){
+      if(problemData.totalSteps)          return problemData.totalSteps;
+      if(Array.isArray(problemData.steps))return problemData.steps.length;
+    }
+    /* Case 2: count DOM markers */
+    const sel=['.step-item','.step','.badge','[data-step]'];
+    for(const s of sel){
+      const n=document.querySelectorAll(s).length;
+      if(n) return n;
+    }
+    return 1;
+  }
+  function send(){
+    const n = countSteps();
+    /* >>> DEBUG <<< */
+    console.debug('[step-count]', n, window.location.pathname);
+    window.parent?.postMessage({type:'xai-step-count', count:n}, '*');
+  }
+  /* answer on request */
+  window.addEventListener('message',ev=>{
+    if(ev?.data?.type==='xai-get-step-count') send();
+  });
+  /* …and volunteer once */
+  if(document.readyState==='loading'){
+    document.addEventListener('DOMContentLoaded',send);
+  }else{send();}
+})();
+</script>
+"""
+
+# ── NEW helper: adds “Step N” badges to .step-item, but skips “Final Answer” (For Graph Iterface)──
+INJECT_SCRIPT_GRAPH_BADGE = """
+<script>
+document.addEventListener('DOMContentLoaded',()=>{
+  const frame = document.getElementById('step-iframe');
+  if(!frame) return;                         /* not a graph explanation */
+  /* inline style keeps badge self-contained */
+  const styleBadge = [
+    'flex-shrink:0',
+    'color:#adadad',
+    'font-size:1.7rem',
+    'font-weight:700',
+    'padding:2px 10px',
+    'border-radius:14px',
+    'pointer-events:none'
+  ].join(';');
+  function decorate(){
+    try{
+      const doc   = frame.contentDocument;
+      if(!doc) return;
+      let num = 0;                           /* running step counter */
+      [...doc.querySelectorAll('.step-item')].forEach(el=>{
+        if(el.querySelector('.badge')) return;          /* already done */
+        const step_id = el.id
+        /* title text (trim & lowercase) */
+        const title = (el.textContent || '').trim().toLowerCase();
+        if(title.startsWith('final answer')) return;    /* skip badge */
+        /* flex container so title & badge share a line */
+        el.style.display    = 'flex';
+        el.style.alignItems = 'center';
+        el.style.gap        = '12px';
+        if(el.firstElementChild) el.firstElementChild.style.flex = '1';
+        const b   = doc.createElement('span');
+        b.className   = 'badge';
+        b.style.cssText = styleBadge;
+        b.textContent = '' + step_id;   /* number only real steps */
+        el.appendChild(b);
+      });
+    }catch(e){}
+  }
+  decorate();                 /* decorate current content */
+  frame.addEventListener('load', decorate);  /* …and on every reload */
+});
+</script>
+"""
+
+DISABLE_SCROLL_SCRIPT = """
+<script>
+document.addEventListener('DOMContentLoaded', ()=>{
+    // Override scrollIntoView for all steps
+    const steps = document.querySelectorAll('.step');
+    steps.forEach(s => {
+        s.scrollIntoView = function(){};
+    });
+});
+</script>
+"""
+
+
+
+
+
+
+def preprocess_html(path: str) -> str:
+    """Return patched HTML as string, injecting style + scripts."""
+    html = Path(path).read_text(encoding="utf-8")
+
+    # ── NEW: make problemData globally visible for graph pages ──
+    html = re.sub(r'\bconst\s+problemData\b', 'window.problemData', html)
+
+    # inj  = INJECT_STYLE + INJECT_SCRIPT_BASE + INJECT_STEPCOUNT + DISABLE_SCROLL_SCRIPT + INJECT_SCRIPT_GRAPH_BADGE
+    inj = (
+        INJECT_STYLE +
+        INJECT_STEPCOUNT+
+        INJECT_SCRIPT_BASE+
+        DISABLE_SCROLL_SCRIPT
+    )
+
+    res  = html.replace("</head>", inj + "</head>", 1) if "</head>" in html else inj + html
+
+
+    if DEBUG_MODE:
+        log.debug("Injected helpers into %s (%d → %d bytes)", path, len(html), len(res))
+    return res
+
+
+def needs_transform(path: str) -> bool:
+    p = path.replace("\\", "/").lower()
+    return (
+        p.endswith(".html") and
+        (
+            "/interactive_nat_lang_explanations/" in p or
+            "/interactive_graph_explanations/"   in p or
+            "/interactive_coding_explanations/" in p 
+        )
+    )
+
+# ─────────────────────────────  FLASK APP  ───────────────────────────
+app = Flask(__name__)
+
+# ─────────────────────────────  ROUTES  ──────────────────────────────
+# Landing page with four evaluation modes
+SELECT_TEMPLATE = """
+<!DOCTYPE html><html lang='en'><head><meta charset='utf-8'>
+<title>Select Evaluation Mode</title>
+<link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap' rel='stylesheet'>
+<style>
+ *,*:before,*:after{box-sizing:border-box}
+ body{margin:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
+      font-family:'Inter',sans-serif;background:#f1f5f9}
+ h1{color:#111827;font-size:2.4rem;font-weight:700;margin-bottom:2rem;text-align:center}
+ .grid{width:90%;max-width:680px;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
+ .card{height:150px;padding:10px;border-radius:16px;color:#fff;font-weight:600;font-size:1.4rem;
+       display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
+       text-decoration:none;transition:.25s;box-shadow:0 6px 18px rgba(0,0,0,.08)}
+ .card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
+ .cot{background:#ef4444}.inl{background:#f97316}.code{background:#10b981}.graph{background:#3b82f6}
+</style></head><body>
+<h1>Choose an Evaluation Interface</h1>
+<div class='grid'>
+  <a class='card cot'   href='/eval_interfaces/cot'>Chain&nbsp;of&nbsp;Thought</a>
+  <a class='card inl'   href='/eval_interfaces/interactive_nl'>Interactive&nbsp;Natural&nbsp;Language</a>
+  <a class='card code'  href='/eval_interfaces/interactive_code'>Interactive&nbsp;Code</a>
+  <a class='card graph' href='/eval_interfaces/interactive_graph'>Interactive&nbsp;Graph</a>
+</div>
+</body></html>
+"""
+
+@app.route("/")
+def landing():
+    log.info("landing page update")
+    SELECTED_CARD = get_the_min_interface()
+    return render_template_string(SELECT_TEMPLATE, selected_card = SELECTED_CARD)
+
+# frontend (outer) pages
+@app.route("/eval_interfaces/<option>")
+def load_outer(option):
+    global SELECTED_CARD
+    rel = EVAL_PAGES.get(option)
+    if not rel:
+        abort(404)
+    #added below
+    full_path = Path(CODEBASE_DIR) / rel
+    html = full_path.read_text(encoding="utf-8")
+
+    #Inject the counter value
+    if option == "cot":
+        counter = increment_submit_counter(COT_COUNTER_FILE)
+        log.info("cot counter value %d", counter)
+        injected = f"<script>const USER_COUNTER = {counter};</script>\n"
+        html = html.replace("</head>", injected + "</head>")
+    elif option == "interactive_graph":
+        counter = increment_submit_counter(GRAPH_COUNTER_FILE)
+        log.info("graph counter value %d", counter)
+        injected = f"<script>const USER_COUNTER = {counter};</script>\n"
+        html = html.replace("</head>", injected + "</head>")
+    elif option == "interactive_code":
+        counter = increment_submit_counter(CODE_COUNTER_FILE)
+        log.info("code counter value %d", counter)
+        injected = f"<script>const USER_COUNTER = {counter};</script>\n"
+        html = html.replace("</head>", injected + "</head>")
+    elif option == "interactive_nl":
+        counter = increment_submit_counter(NATURAL_LANG_COUNTER_FILE)
+        log.info("natural language counter value %d", counter)
+        injected = f"<script>const USER_COUNTER = {counter};</script>\n"
+        html = html.replace("</head>", injected + "</head>")
+
+    return render_template_string(html)
+    # return send_file(Path(CODEBASE_DIR) / rel)
+
+# Explanation HTML (inner iframes)
+@app.route("/interactive-llm-xai/<path:sub>")
+@app.route("/eval_interfaces/interactive-llm-xai/<path:sub>")
+def serve_explanation(sub):
+    full = Path(sub).resolve()
+    needs = needs_transform(str(full))
+    log.info("serve_explanation | %s | needs_transform=%s", full, needs)
+
+    if not full.exists():
+        abort(404)
+    if full.is_dir():
+        return browse(sub)
+    if needs:
+        return Response(preprocess_html(str(full)), mimetype="text/html")
+    return send_file(full)
+
+# Very lightweight directory browser (handy for debugging)
+BROWSER_TEMPLATE = """
+<!DOCTYPE html><html><head><meta charset='utf-8'><title>Browse</title>
+<style>
+ html,body{font-family:Arial;margin:20px;height: 100vh !important;}
+ ul{list-style:none;padding:0} li{margin:4px 0}
+ a{text-decoration:none;color:#2563eb} a:hover{text-decoration:underline}
+ .content{margin-top:15px;border:1px solid #e5e7eb;padding:10px;border-radius:8px;background:#f9fafb}
+</style></head><body>
+ {% if parent_link %}<p><a href='{{ parent_link }}'>[Parent]</a></p>{% endif %}
+ {% if directories %}<h2>Folders</h2><ul>{% for d in directories %}
+   <li><a href='{{ url_for('browse', req_path=d.link) }}'>{{ d.name }}</a></li>{% endfor %}</ul>{% endif %}
+ {% if files %}<h2>HTML Files</h2><ul>{% for f in files %}
+   <li><a href='{{ url_for('browse', req_path=f.link) }}'>{{ f.name }}</a></li>{% endfor %}</ul>{% endif %}
+ {% if html_content %}<div class='content'>{{ html_content|safe }}</div>{% endif %}
+</body></html>
+"""
+
+@app.route("/browse/", defaults={"req_path": ""})
+@app.route("/browse/<path:req_path>")
+def browse(req_path):
+    if req_path and req_path.split(os.sep)[0] not in ALLOWED_ROOTS:
+        abort(404)
+    full = Path(req_path).resolve()
+    if not full.exists():
+        abort(404)
+
+    if full.is_dir():
+        dirs, files = [], []
+        for e in sorted(full.iterdir()):
+            if e.name.startswith("."):  # skip hidden
+                continue
+            rel = str(e.relative_to(Path(".")))
+            if e.is_dir():
+                dirs.append({"name": e.name, "link": rel})
+            elif e.suffix.lower() == ".html":
+                files.append({"name": e.name, "link": rel})
+        parent = url_for("landing") if not req_path else url_for("browse", req_path=str(full.parent))
+        return render_template_string(BROWSER_TEMPLATE,
+                                      parent_link=parent,
+                                      directories=dirs, files=files,
+                                      html_content=None)
+
+    # serve file content (HTML or plain text)
+    if full.suffix.lower() == ".html":
+        return send_file(full)
+    parent = url_for("browse", req_path=str(full.parent.relative_to(Path("."))))
+    txt = full.read_text(encoding="utf-8", errors="replace")
+    return render_template_string(BROWSER_TEMPLATE,
+                                  parent_link=parent,
+                                  html_content=f"<pre>{txt}</pre>")
+
+# ──���─────────────────────  RESULT ENDPOINTS  ─────────────────────────
+@app.route("/save-stats", methods=["POST"])
+def save_stats():
+    # global SELECTED_CARD
+    data = request.get_json(force=True, silent=True) or {}
+    sid   = data.get("sessionId") or gen_session_id()
+    stats = {k: data.get(k) for k in (
+        "overallAccuracy","correctItemAccuracy","incorrectItemAccuracy",
+        "avgTimeCorrect","avgTimeIncorrect","samples","subjective_feedback")}
+    stats["timestamp"] = datetime.utcnow().isoformat()
+    stats["session_id"]= sid
+    stats["user_name"] = data.get("userName","anonymous")
+
+    # quick CSV summary (one line)
+    row = [
+        stats["timestamp"], sid, stats["user_name"],
+        data.get("overallAccuracy"), data.get("correctItemAccuracy"),
+        data.get("incorrectItemAccuracy"), data.get("avgTimeCorrect"),
+        data.get("avgTimeIncorrect"),
+    ]
+    need_header = not CSV_PATH.exists()
+    with CSV_PATH.open("a", newline="") as f:
+        w = csv.writer(f)
+        if need_header:
+            w.writerow(CSV_HEADER)
+        w.writerow(row)
+
+    # full JSON per session
+    path = save_session_local(sid, stats)
+    if HF_TOKEN:
+        push_to_hf(path, sid)
+    log.info("new result pushed to database")
+    SELECTED_CARD = get_the_min_interface()
+    log.info("current selected card")
+    log.info(SELECTED_CARD)
+    return jsonify({"status":"ok"})
+
+# ───────────────────────────────  MAIN  ──────────────────────────────
+if __name__ == "__main__":
+    # For local debugging; HF Spaces will launch via gunicorn/uvicorn
+    app.run(host="0.0.0.0", port=int(os.getenv("PORT", 7860)), debug=False)

code_counter.txt

@@ -0,0 +1 @@
+0

evaluation/.ipynb_checkpoints/Untitled-checkpoint.ipynb

@@ -0,0 +1,6 @@
+{
+ "cells": [],
+ "metadata": {},
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

evaluation/eval_interfaces/coding_eval_interface.html

@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>Explanation Evaluation</title>
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
+
+<style>
+/* ──────────── layout & theme ──────────── */
+html, body{ margin: 0;
+  padding: 0;
+  background: #fff; /* Make background white */
+  height: 100vh;
+  overflow: hidden;
+          }
+.container{
+  height: 100vh; /* Full viewport height */
+  background: #fff; /* Container background white */
+  padding: 1rem; /* Keep internal padding */
+  box-sizing: border-box;
+  width: 100%; /* compensate width after scaling */
+  margin: 0; /* Remove margin */
+  border-radius: 0; /* Remove rounded corners */
+  box-shadow: none; /* Remove shadow */
+  display: flex;
+  flex-direction: column;}
+header{text-align:center;border-bottom:1px solid #dee2e6}
+header h2{margin:0;font-size:1.5rem;color:#343a40; margin-bottom:1rem}
+/* progress bar */
+#progress-container{margin:.5rem 0;text-align:center;margin-top:5rem}
+progress{width:100%;height:20px;border-radius:10px;appearance:none}
+progress::-webkit-progress-bar{background:#f1f1f1}
+progress::-webkit-progress-value{background:#28a745;border-radius:10px}
+#progress-text{margin-top:.5rem;font-size:1.1rem;color:#495057}
+/* explanation frame */
+
+/* explanation frame */
+.explain-row{
+  display:flex;
+  gap:16px;                 /* space between iframe and button column */
+  align-items:flex-start;
+}
+  
+iframe{
+  width: 85%;
+  height: 89vh; /* Take most of the height */
+  border: 2px solid #ced4da;
+  border-radius: 4px;
+  background: #fff;
+  transform: scale(1, 1); 
+  transform-origin:top right;
+}
+/* controls */
+.controls{
+  flex:1 1 0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  text-align:center;
+}
+
+.controls p{font-size:1.2rem;margin: 0.5rem 2rem 0.5rem 0;color:#343a40}
+button{padding:.8rem 1.5rem;margin:.5rem;font-size:1rem;border:none;border-radius:4px;
+  cursor:pointer;transition:opacity .3s;background:#6c757d;color:#fff}
+button:hover{opacity:.9}
+/* follow-up (wrong-step) */
+#wrong-box{display:none;margin:1rem auto;text-align:center;flex-direction:column;align-items:center}
+#wrong-step{width:90px;padding:.45rem;text-align:center;font-size:1rem;margin-top:.4rem}
+#confirm-wrong{margin-top:.8rem}
+/* footer buttons */
+#download-btn{display:block;margin:1rem auto;visibility:hidden}
+#download-btn{background:#007bff;display:none} 
+#restart-btn{display:block;margin:1rem auto}      /* optional offline CSV */
+#restart-btn{background:#dc3545;display:none}
+/* results + feedback */
+#accuracy{margin-top:2rem;padding:1rem;border:1px solid #ced4da;border-radius:4px;
+  background:#f8f9fa;color:#495057;font-size:1.1rem;line-height:1.6;text-align:center}
+#accuracy h2{margin:0 0 1rem}
+</style>
+</head>
+<body>
+<div class="container">
+  <header><h2>Interactive Code Explanation Experiment</h2></header>
+
+  <!-- <div id="progress-container">
+    <progress id="progress-bar" value="0" max="10"></progress>
+    <p id="progress-text">Question 0 of 10 (Remaining: 10)</p>
+  </div> -->
+
+  <div class="explain-row">
+    <iframe id="explanation-frame" src=""></iframe>
+
+    <!-- MAIN CONTROLS (now vertical on the right) -->
+    <div class="controls" style="display:none">
+      <p id= "instruction"> you <strong>MUST</strong> do the experiment in full screen mode by clicking the button below 👇 </p>
+      <button id="full_screen" >Enter Full Screen</button>
+      <p>Is the final answer correct or incorrect?</p>
+      <button id="btn-correct">Correct</button>
+      <button id="btn-wrong" >Incorrect</button>
+       <!-- ══════ FOLLOW-UP WHEN INCORRECT ══════ -->
+      <div id="wrong-box">
+        <span>You think the final answer is incorrect! In which step do you think the model was wrong? Step (1 – <span id="max-step">1</span>)</span>
+        <input id="wrong-step" type="number" min="1" step="1">
+        <button id="confirm-wrong">Confirm</button>
+      </div>
+      <div id="progress-container">
+        <progress id="progress-bar" value="0" max="10"></progress>
+        <p id="progress-text">Question 0 of 10 (Remaining: 10)</p>
+      </div>
+    </div>
+  </div>
+  
+  <button id="download-btn">Download Results</button>
+  <button id="restart-btn">Submit</button>
+  
+  <div id="accuracy"></div>
+</div>
+  
+
+<!-- ──────────── SCRIPT ──────────── -->
+<script>
+
+document.addEventListener("DOMContentLoaded", () => {
+    const btn = document.getElementById('full_screen');
+    const span = document.getElementById('instruction');
+  
+    function isFullscreen() {
+      return document.fullscreenElement || 
+             document.webkitFullscreenElement || 
+             document.mozFullScreenElement || 
+             document.msFullscreenElement;
+    }
+
+    //Show button only if NOT in fullscreen at start
+    if (!isFullscreen()) {
+         btn.style.visibility = 'visible';
+         span.style.visibility = "visible";
+         
+
+    }
+
+    btn.addEventListener('click', () => {
+        if (!isFullscreen()) {
+            document.documentElement.requestFullscreen?.() ||
+            document.documentElement.webkitRequestFullscreen?.() ||
+            document.documentElement.mozRequestFullScreen?.() ||
+            document.documentElement.msRequestFullscreen?.();
+        }
+    });
+
+    function toggleButton() {
+        if (isFullscreen()) {
+            btn.style.visibility = 'hidden'; // Hide in fullscreen
+            span.style.visibility = "hidden";
+        } else {
+            btn.style.visibility = 'visible'; // Show when not fullscreen
+            span.style.visibility = "visible";
+        }
+    }
+    document.addEventListener('fullscreenchange', toggleButton);
+    document.addEventListener('webkitfullscreenchange', toggleButton);
+    document.addEventListener('mozfullscreenchange', toggleButton);
+    document.addEventListener('MSFullscreenChange', toggleButton);
+});
+  
+/* utilities */
+const shuffle=a=>{for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
+const nowISO=()=>new Date().toISOString();
+/* session vars */
+let userName="anonymous"; function setUserName(n){userName=n;}
+const sessionId=crypto.randomUUID();
+const base ="interactive-llm-xai/evaluation/eval_interfaces/interactive_coding_explanations/";
+const files = [
+// 1 “right” explanation
+`${base}interactive_code_right_NA_41.html`,
+`${base}interactive_code_right_CA_${USER_COUNTER}.html`,
+`${base}interactive_code_wrong_CO_${USER_COUNTER}.html`,
+`${base}interactive_code_wrong_CS_${USER_COUNTER}.html`,
+`${base}interactive_code_wrong_CV_${USER_COUNTER}.html`,
+`${base}interactive_code_wrong_FC_${USER_COUNTER}.html`,
+`${base}interactive_code_wrong_HA_${USER_COUNTER}.html`,
+`${base}interactive_code_wrong_MS_${USER_COUNTER}.html`,
+`${base}interactive_code_wrong_OP_31.html`,
+`${base}interactive_code_wrong_UC_${USER_COUNTER}.html`
+];
+const total=files.length;
+/* state */
+let idx=0,startTime="",firstClick="";
+let clickCounts={play:0,stop:0,next:0,prev:0};
+const samples=[];
+let currentMaxStep=1;
+/* DOM */
+const frame=document.getElementById('explanation-frame');
+const controls=document.querySelector('.controls');
+const downloadBtn=document.getElementById('download-btn');
+const restartBtn=document.getElementById('restart-btn');
+const wrongBox=document.getElementById('wrong-box');
+const wrongInput=document.getElementById('wrong-step');
+const maxStepSpan=document.getElementById('max-step');
+const accDiv=document.getElementById('accuracy');
+/* progress */
+function updateProgress(){
+  document.getElementById('progress-bar').value=idx;
+  document.getElementById('progress-text').textContent=
+    idx<total?`Question ${idx+1} of ${total} (Remaining: ${total-idx})`
+             :'All questions reviewed.';
+}
+/* telemetry from explanation page */
+window.addEventListener('message',ev=>{
+  if(!ev.data||ev.data.type!=='xai-click')return;
+  clickCounts[ev.data.key]=(clickCounts[ev.data.key]||0)+1;
+  if(!firstClick)firstClick=nowISO();
+});
+/* navigation */
+function loadNext(){
+  if(idx>=total){renderResults();return;}
+  updateProgress();
+  frame.src=files[idx];
+  controls.style.display='block';downloadBtn.style.display='block';
+  wrongBox.style.display='none';wrongInput.value='';
+  startTime=Date.now();firstClick=null;clickCounts={play:0,stop:0,next:0,prev:0};
+}
+frame.addEventListener('load',()=>{
+  const hide=frame.src.includes('instructions.html');
+  controls.style.display=hide?'none':'block';
+  downloadBtn.style.display=hide?'none':'black';
+  restartBtn.style.display='none';
+  if(!hide){
+    currentMaxStep=10;
+    wrongInput.min=1;wrongInput.max=currentMaxStep;maxStepSpan.textContent=currentMaxStep;
+  }
+});
+
+
+/* answer flow */
+document.getElementById('btn-correct').onclick=()=>saveAnswer('correct',0);
+document.getElementById('btn-wrong').onclick=()=>{
+  wrongBox.style.display='flex';wrongInput.value='';wrongInput.focus();
+};
+document.getElementById('confirm-wrong').onclick=()=>{
+  const n=parseInt(wrongInput.value,10);
+  if(Number.isNaN(n)||n<1||n>currentMaxStep){
+    alert(`Enter a valid step number (1 – ${currentMaxStep})`);wrongInput.focus();return;
+  }
+  saveAnswer('incorrect',n);wrongBox.style.display='none';
+};
+function saveAnswer(ans,userInputWrongStep){
+  const elapsed=(Date.now()-startTime)/1000;
+  const ActualWrongStep = parseInt(frame.contentDocument.querySelector('.wrong-step')?.textContent.trim() ?? '', 10);
+  samples.push({
+    file:files[idx],
+    id:files[idx].match(/([^/_]+_[^/_]+_\d+)\.html$/)[1],
+    label:files[idx].includes('right')?'correct':'wrong',
+    humanAnswer:ans,
+    actualWrongstep: ActualWrongStep,
+    userInputWrongStep,
+    elapsedSeconds:+elapsed.toFixed(3),
+    clickCounts,
+    // firstActionAt:firstClick,
+    // answeredAt:nowISO()
+  });
+  idx++;loadNext();
+}
+/* results + feedback */
+function renderResults(){
+  /* metrics */
+  const correctItems=samples.filter(s=>s.label==='correct');
+  const incorrectItems=samples.filter(s=>s.label==='wrong');
+  const correctHits=samples.filter(s=>s.label==='correct'&&s.humanAnswer==='correct').length;
+  const incorrectHits=samples.filter(s=>s.label==='wrong'&&s.humanAnswer==='incorrect').length;
+  const overallCorrect=correctHits+incorrectHits;
+  const overallAcc=((overallCorrect/total)*100).toFixed(2);
+  const correctAcc  =correctItems.length?((correctHits  /correctItems.length )*100).toFixed(2):'0.00';
+  const incorrectAcc=incorrectItems.length?((incorrectHits/incorrectItems.length)*100).toFixed(2):'0.00';
+  const avgTC=(correctItems  .reduce((a,s)=>a+s.elapsedSeconds,0)/(correctItems.length ||1)).toFixed(2);
+  const avgTI=(incorrectItems.reduce((a,s)=>a+s.elapsedSeconds,0)/(incorrectItems.length||1)).toFixed(2);
+  /* hide UI parts */
+  controls.style.display='none';downloadBtn.style.display='none';
+  document.getElementById('progress-container').style.display='none';
+  frame.style.display='none';
+  /* results + feedback UI */
+  accDiv.innerHTML=`
+    <h2>Results</h2>
+    <p><strong>Overall Accuracy:</strong> ${overallCorrect}/${total} (${overallAcc}%)</p>
+    <p><strong>Correct-Item Accuracy:</strong>   ${correctAcc}%</p>
+    <p><strong>Incorrect-Item Accuracy:</strong> ${incorrectAcc}%</p>
+    <p><strong>Avg Time (Correct):</strong>   ${avgTC} s</p>
+    <p><strong>Avg Time (Incorrect):</strong> ${avgTI} s</p>
+    <textarea id="feedback-box" placeholder="Any comments or suggestions?"></textarea>
+  `;
+  restartBtn.style.display='block';
+  /* send + restart */
+  restartBtn.onclick=()=>{
+    const subjective_feedback=document.getElementById('feedback-box').value.trim();
+    fetch('/save-stats', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({
+        sessionId,
+        userName,
+        overallAccuracy: +overallAcc,
+        correctItemAccuracy: correctAcc,
+        incorrectItemAccuracy: incorrectAcc,
+        avgTimeCorrect: avgTC,
+        avgTimeIncorrect: avgTI,
+        samples,
+        subjective_feedback
+    })
+}).then(response => {
+    if (response.ok) {
+        window.location.href = 'interactive-llm-xai/evaluation/eval_interfaces/thank_you_icoding.html';
+    } else {
+        alert('Failed to save stats. Please try again.');
+    }
+});
+  };
+}
+/* offline CSV (optional) */
+downloadBtn.onclick=()=>{
+  const hdr=['file','label','humanAnswer','wrongStep','time','play','stop','next','prev'];
+  const rows=[hdr,...samples.map(s=>[
+    s.file,s.label,s.humanAnswer,s.wrongStep??'',s.elapsedSeconds,
+    s.clickCounts.play,s.clickCounts.stop,s.clickCounts.next,s.clickCounts.prev
+  ])];
+  const csv=new Blob([rows.map(r=>r.join(',')).join('\n')],{type:'text/csv'});
+  const url=URL.createObjectURL(csv);
+  const a=document.createElement('a');a.href=url;a.download='results.csv';a.click();
+  URL.revokeObjectURL(url);
+};
+/* kick-off */
+updateProgress();
+frame.src="interactive-llm-xai/evaluation/eval_interfaces/instructions.html";
+</script>
+</body>
+</html>

evaluation/eval_interfaces/graph_eval_interface.html

@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>Explanation Evaluation</title>
+<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
+
+<style>
+/* ──────────── layout & theme ──────────── */
+html, body{ margin: 0;
+  padding: 0;
+  background: #fff; /* Make background white */
+  height: 100vh;
+  overflow: hidden;
+          }
+.container{
+  height: 100vh; /* Full viewport height */
+  background: #fff; /* Container background white */
+  padding: 1rem; /* Keep internal padding */
+  box-sizing: border-box;
+  width: 100%; /* compensate width after scaling */
+  margin: 0; /* Remove margin */
+  border-radius: 0; /* Remove rounded corners */
+  box-shadow: none; /* Remove shadow */
+  display: flex;
+  flex-direction: column;}
+header{text-align:center;border-bottom:1px solid #dee2e6}
+header h2{margin:0;font-size:1.5rem;color:#343a40; margin-bottom:1rem}
+/* progress bar */
+#progress-container{margin:.5rem 0;text-align:center;margin-top:5rem}
+progress{width:100%;height:20px;border-radius:10px;appearance:none}
+progress::-webkit-progress-bar{background:#f1f1f1}
+progress::-webkit-progress-value{background:#28a745;border-radius:10px}
+#progress-text{margin-top:.5rem;font-size:1.1rem;color:#495057}
+/* explanation frame */
+
+/* explanation frame */
+.explain-row{
+  display:flex;
+  gap:16px;                 /* space between iframe and button column */
+  align-items:flex-start;
+}
+  
+iframe{
+  width: 85%;
+  height: 89vh; /* Take most of the height */
+  border: 2px solid #ced4da;
+  border-radius: 4px;
+  background: #fff;
+  transform: scale(1, 1); 
+  transform-origin:top right;
+}
+/* controls */
+.controls{
+  flex:1 1 0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  text-align:center;
+}
+
+.controls p{font-size:1.2rem;margin: 0.5rem 2rem 0.5rem 0;color:#343a40}
+button{padding:.8rem 1.5rem;margin:.5rem;font-size:1rem;border:none;border-radius:4px;
+  cursor:pointer;transition:opacity .3s;background:#6c757d;color:#fff}
+button:hover{opacity:.9}
+/* follow-up (wrong-step) */
+#wrong-box{display:none;margin:1rem auto;text-align:center;flex-direction:column;align-items:center}
+#wrong-step{width:90px;padding:.45rem;text-align:center;font-size:1rem;margin-top:.4rem}
+#confirm-wrong{margin-top:.8rem}
+/* footer buttons */
+#download-btn{display:block;margin:1rem auto;visibility:hidden}
+#download-btn{background:#007bff;display:none} 
+#restart-btn{display:block;margin:1rem auto}      /* optional offline CSV */
+#restart-btn{background:#dc3545;display:none}
+/* results + feedback */
+#accuracy{margin-top:2rem;padding:1rem;border:1px solid #ced4da;border-radius:4px;
+  background:#f8f9fa;color:#495057;font-size:1.1rem;line-height:1.6;text-align:center}
+#accuracy h2{margin:0 0 1rem}
+</style>
+</head>
+<body>
+<div class="container">
+  <header><h2>Interactive Graph Explanation Experiment</h2></header>
+
+  <!-- <div id="progress-container">
+    <progress id="progress-bar" value="0" max="10"></progress>
+    <p id="progress-text">Question 0 of 10 (Remaining: 10)</p>
+  </div> -->
+
+  <div class="explain-row">
+    <iframe id="explanation-frame" src=""></iframe>
+
+    <!-- MAIN CONTROLS (now vertical on the right) -->
+    <div class="controls" style="display:none">
+      <p id= "instruction"> you <strong>MUST</strong> do the experiment in full screen mode by clicking the button below 👇 </p>
+      <button id="full_screen" >Enter Full Screen</button>
+      <p>Is the final answer correct or incorrect?</p>
+      <button id="btn-correct">Correct</button>
+      <button id="btn-wrong">Incorrect</button>
+       <!-- ══════ FOLLOW-UP WHEN INCORRECT ══════ -->
+      <div id="wrong-box">
+        <span>You think the final answer is incorrect! In which step do you think the model was wrong? Step (1 – <span id="max-step">1</span>)</span>
+        <input id="wrong-step" type="number" min="1" step="1">
+        <button id="confirm-wrong">Confirm</button>
+      </div>
+      <div id="progress-container">
+        <progress id="progress-bar" value="0" max="10"></progress>
+        <p id="progress-text">Question 0 of 10 (Remaining: 10)</p>
+      </div>
+    </div>
+  </div>
+  
+  <button id="download-btn">Download Results</button>
+  <button id="restart-btn">Submit</button>
+  
+  <div id="accuracy"></div>
+</div>
+  
+
+<!-- ──────────── SCRIPT ──────────── -->
+<script>
+
+document.addEventListener("DOMContentLoaded", () => {
+    const btn = document.getElementById('full_screen');
+    const span = document.getElementById('instruction');
+    function isFullscreen() {
+      return document.fullscreenElement || 
+             document.webkitFullscreenElement || 
+             document.mozFullScreenElement || 
+             document.msFullscreenElement;
+    }
+    // Show button only if NOT in fullscreen at start
+    if (!isFullscreen()) {
+         btn.style.visibility = 'visible';
+         span.style.visibility = "visible";
+    }
+    btn.addEventListener('click', () => {
+        if (!isFullscreen()) {
+            document.documentElement.requestFullscreen?.() ||
+            document.documentElement.webkitRequestFullscreen?.() ||
+            document.documentElement.mozRequestFullScreen?.() ||
+            document.documentElement.msRequestFullscreen?.();
+        }
+    });
+    function toggleButton() {
+        if (isFullscreen()) {
+            btn.style.visibility = 'hidden'; // Hide in fullscreen
+            span.style.visibility = "hidden";
+        } else {
+            btn.style.visibility = 'visible'; // Show when not fullscreen
+            span.style.visibility = "visible";
+        }
+    }
+    document.addEventListener('fullscreenchange', toggleButton);
+    document.addEventListener('webkitfullscreenchange', toggleButton);
+    document.addEventListener('mozfullscreenchange', toggleButton);
+    document.addEventListener('MSFullscreenChange', toggleButton);
+});
+  
+/* utilities */
+const shuffle=a=>{for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
+const nowISO=()=>new Date().toISOString();
+/* session vars */
+let userName="anonymous"; function setUserName(n){userName=n;}
+const sessionId=crypto.randomUUID();
+const base =
+  "interactive-llm-xai/evaluation/eval_interfaces/interactive_graph_explanations/";
+const files = [
+  // 1 “right” explanation
+  // 1 “right” explanation
+  `${base}interactive_graph_right_NA_41.html`,
+  `${base}interactive_graph_wrong_CA_13.html`,
+  `${base}interactive_graph_wrong_CO_6.html`,
+  `${base}interactive_graph_wrong_CS_33.html`,
+  `${base}interactive_graph_wrong_CV_24.html`,
+  `${base}interactive_graph_wrong_FC_19.html`,
+  `${base}interactive_graph_wrong_HA_19.html`,
+  `${base}interactive_graph_wrong_MS_25.html`,
+  `${base}interactive_graph_wrong_OP_31.html`,
+  `${base}interactive_graph_wrong_UC_39.html`
+];
+
+const total=files.length;
+/* state */
+let idx=0,startTime="",firstClick="";
+let clickCounts={play:0,stop:0,next:0,prev:0};
+const samples=[];
+let currentMaxStep=1;
+/* DOM */
+const frame=document.getElementById('explanation-frame');
+const controls=document.querySelector('.controls');
+const downloadBtn=document.getElementById('download-btn');
+const restartBtn=document.getElementById('restart-btn');
+const wrongBox=document.getElementById('wrong-box');
+const wrongInput=document.getElementById('wrong-step');
+const maxStepSpan=document.getElementById('max-step');
+const accDiv=document.getElementById('accuracy');
+/* progress */
+function updateProgress(){
+  document.getElementById('progress-bar').value=idx;
+  document.getElementById('progress-text').textContent=
+    idx<total?`Question ${idx+1} of ${total} (Remaining: ${total-idx})`
+             :'All questions reviewed.';
+}
+/* telemetry from explanation page */
+window.addEventListener('message',ev=>{
+  if(!ev.data||ev.data.type!=='xai-click')return;
+  clickCounts[ev.data.key]=(clickCounts[ev.data.key]||0)+1;
+  if(!firstClick)firstClick=nowISO();
+});
+/* navigation */
+function loadNext(){
+  if(idx>=total){renderResults();return;}
+  updateProgress();
+  frame.src=files[idx];
+  controls.style.display='block';downloadBtn.style.display='block';
+  wrongBox.style.display='none';wrongInput.value='';
+  startTime=Date.now();firstClick=null;clickCounts={play:0,stop:0,next:0,prev:0};
+}
+frame.addEventListener('load',()=>{
+  const hide=frame.src.includes('instructions.html');
+  controls.style.display=hide?'none':'block';
+  downloadBtn.style.display=hide?'none':'black';
+  restartBtn.style.display='none';
+  if(!hide){
+    currentMaxStep=10;
+    wrongInput.min=1;wrongInput.max=currentMaxStep;maxStepSpan.textContent=currentMaxStep;
+  }
+});
+
+
+/* answer flow */
+document.getElementById('btn-correct').onclick=()=>saveAnswer('correct',0);
+document.getElementById('btn-wrong').onclick=()=>{
+  wrongBox.style.display='flex';wrongInput.value='';wrongInput.focus();
+};
+document.getElementById('confirm-wrong').onclick=()=>{
+  const n=parseInt(wrongInput.value,10);
+  if(Number.isNaN(n)||n<1||n>currentMaxStep){
+    alert(`Enter a valid step number (1 – ${currentMaxStep})`);wrongInput.focus();return;
+  }
+  saveAnswer('incorrect',n);wrongBox.style.display='none';
+};
+function saveAnswer(ans,userInputWrongStep){
+  const elapsed=(Date.now()-startTime)/1000;
+  const ActualWrongStep = parseInt(frame.contentDocument.querySelector('.wrong-step')?.textContent.trim() ?? '', 10);
+  samples.push({
+    file:files[idx],
+    id:files[idx].match(/([^/_]+_[^/_]+_\d+)\.html$/)[1],
+    label:files[idx].includes('right')?'correct':'wrong',
+    humanAnswer:ans,
+    actualWrongstep: ActualWrongStep,
+    userInputWrongStep,
+    elapsedSeconds:+elapsed.toFixed(3),
+    clickCounts,
+    // firstActionAt:firstClick,
+    // answeredAt:nowISO()
+  });
+  idx++;loadNext();
+}
+/* results + feedback */
+function renderResults(){
+  /* metrics */
+  const correctItems=samples.filter(s=>s.label==='correct');
+  const incorrectItems=samples.filter(s=>s.label==='wrong');
+  const correctHits=samples.filter(s=>s.label==='correct'&&s.humanAnswer==='correct').length;
+  const incorrectHits=samples.filter(s=>s.label==='wrong'&&s.humanAnswer==='incorrect').length;
+  const overallCorrect=correctHits+incorrectHits;
+  const overallAcc=((overallCorrect/total)*100).toFixed(2);
+  const correctAcc  =correctItems.length?((correctHits  /correctItems.length )*100).toFixed(2):'0.00';
+  const incorrectAcc=incorrectItems.length?((incorrectHits/incorrectItems.length)*100).toFixed(2):'0.00';
+  const avgTC=(correctItems  .reduce((a,s)=>a+s.elapsedSeconds,0)/(correctItems.length ||1)).toFixed(2);
+  const avgTI=(incorrectItems.reduce((a,s)=>a+s.elapsedSeconds,0)/(incorrectItems.length||1)).toFixed(2);
+  /* hide UI parts */
+  controls.style.display='none';downloadBtn.style.display='none';
+  document.getElementById('progress-container').style.display='none';
+  frame.style.display='none';
+  /* results + feedback UI */
+  accDiv.innerHTML=`
+    <h2>Results</h2>
+    <p><strong>Overall Accuracy:</strong> ${overallCorrect}/${total} (${overallAcc}%)</p>
+    <p><strong>Correct-Item Accuracy:</strong>   ${correctAcc}%</p>
+    <p><strong>Incorrect-Item Accuracy:</strong> ${incorrectAcc}%</p>
+    <p><strong>Avg Time (Correct):</strong>   ${avgTC} s</p>
+    <p><strong>Avg Time (Incorrect):</strong> ${avgTI} s</p>
+    <textarea id="feedback-box" placeholder="Any comments or suggestions?"></textarea>
+  `;
+  restartBtn.style.display='block';
+  /* send + restart */
+  restartBtn.onclick=()=>{
+    const subjective_feedback=document.getElementById('feedback-box').value.trim();
+    fetch('/save-stats', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({
+        sessionId,
+        userName,
+        overallAccuracy: +overallAcc,
+        correctItemAccuracy: correctAcc,
+        incorrectItemAccuracy: incorrectAcc,
+        avgTimeCorrect: avgTC,
+        avgTimeIncorrect: avgTI,
+        samples,
+        subjective_feedback
+    })
+}).then(response => {
+    if (response.ok) {
+        window.location.href = 'interactive-llm-xai/evaluation/eval_interfaces/thank_you_igraph.html';
+    } else {
+        alert('Failed to save stats. Please try again.');
+    }
+});
+  };
+}
+/* offline CSV (optional) */
+downloadBtn.onclick=()=>{
+  const hdr=['file','label','humanAnswer','wrongStep','time','play','stop','next','prev'];
+  const rows=[hdr,...samples.map(s=>[
+    s.file,s.label,s.humanAnswer,s.wrongStep??'',s.elapsedSeconds,
+    s.clickCounts.play,s.clickCounts.stop,s.clickCounts.next,s.clickCounts.prev
+  ])];
+  const csv=new Blob([rows.map(r=>r.join(',')).join('\n')],{type:'text/csv'});
+  const url=URL.createObjectURL(csv);
+  const a=document.createElement('a');a.href=url;a.download='results.csv';a.click();
+  URL.revokeObjectURL(url);
+};
+/* kick-off */
+updateProgress();
+frame.src="interactive-llm-xai/evaluation/eval_interfaces/instructions.html";
+</script>
+</body>
+</html>

evaluation/eval_interfaces/instructions.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Experiment Instructions</title>
+<style>
+/* ───────────  base  ─────────── */
+*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --gap:1.25rem;
+  --card-border:#0d6efd;
+  --card-bg:#ffffff;
+}
+html,body{height:80%}
+body{
+  font-family:Arial,Helvetica,sans-serif;
+  line-height:1.55;
+  height:800px;
+  background:#f8f9fa;
+  color:#212529;
+  display:flex;
+  flex-direction:column;
+  align-items:center;              /* center on huge screens */
+  padding:var(--gap);
+}
+
+/* ───────────  header  ─────────── */
+h2{
+  color:#343a40;
+  margin-bottom:var(--gap);
+  font-size:1.6rem;
+  font-weight:700;
+  text-align:center;
+}
+
+/* ───────────  card stack  ─────────── */
+.stack{
+  flex:1;
+  width:100%;
+  max-width:820px;                 /* keeps long lines readable */
+  display:flex;
+  flex-direction:column;
+  gap:var(--gap);
+}
+
+.card{
+  background:var(--card-bg);
+  border-left:5px solid var(--card-border);
+  padding:1rem 1.25rem;
+  border-radius:6px;
+  box-shadow:0 1px 4px rgba(0,0,0,.06);
+}
+
+.card h3{
+  color:#343a40;
+  font-size:1.1rem;
+  margin-bottom:.5rem;
+}
+
+.card ul{padding-left:1.2rem}
+.card p,
+.card li{margin-bottom:.55rem}
+
+/* ───────────  start button  ─────────── */
+.start{
+  align-self:center;
+  margin-top:var(--gap);
+  padding:.75rem 1.6rem;
+  font-size:1rem;
+  background:#0d6efd;
+  color:#fff;
+  border:none;
+  border-radius:4px;
+  cursor:pointer;
+  transition:opacity .25s;
+}
+.start:hover{opacity:.9}
+
+/* ───────────  small screens  ─────────── */
+@media(max-width:480px){
+  body{padding:.9rem}
+  .card{padding:.9rem 1rem}
+}
+</style>
+</head>
+<body>
+
+<h2>🧠 Experiment Instructions</h2>
+
+<!-- instruction blocks -->
+<div class="stack">
+  <div class="card">
+    <h3>🧭 Interface Overview</h3>
+    <p>You will review <strong>10 math problems</strong> and decide whether each final numerical answer is <em>correct</em> or <em>incorrect</em>.</p>
+    <ul>
+      <li><strong>Left panel</strong> — problem statement &amp; facts</li>
+      <li><strong>Right panel</strong> — step-by-step explanation</li>
+    </ul>
+  </div>
+
+  <div class="card">
+    <h3>🕹️ Controls</h3>
+    <ul>
+      <li><strong>▶ / ❚❚</strong> — auto-play / pause</li>
+      <li><strong>⤴ / ⤵</strong> — previous / next step manually</li>
+    </ul>
+  </div>
+
+  <div class="card">
+    <h3>🎨 Highlights</h3>
+    <p>Variables are colour-coded and their values update live as each step runs.</p>
+  </div>
+
+  <div class="card">
+    <h3>❌Potential Errors</h3>
+    <p>Some explanations may contain errors. If you notice any, please indicate the step where you believe the first error occurs..</p>
+    <p>The error type includes:</p>
+    <ul>
+      <li><strong>Calculation Error (CA)</strong>: Error appears during the calculation process.</li>
+      <li><strong>Counting Error (CO)</strong>: Error occurs during the counting process.</li>
+      <li><strong>Context Value Error (CV)</strong>: Error arises when attributes of named entities do not align with the information provided.</li>
+      <li><strong>Hallucination (HA)</strong>: Error involves adding fictitious unrelated statements contradictory to the question.</li>
+      <li><strong>Unit Conversion Error (UC)</strong>: Error occurs during unit conversion process.</li>
+      <li><strong>Operator Error (OP)</strong>: Error involves a single operator being erroneously applied within the expression.</li>
+      <li><strong>Formula Confusion Error (FC)</strong>: Error appears when applying formula in inappropriate scenario.</li>
+      <li><strong>Missing Step (MS)</strong>: Error entails an incomplete generation of reasoning process, lacking a necessary step.</li>
+      <li><strong>Contradictory Step (CS)</strong>: Error manifests inconsistency between preceding and subsequent reasoning steps.</li>
+    </ul>
+  </div>
+
+</div>
+  
+
+<!-- start button -->
+<button class="start" id="startBtn">Next</button>
+
+<script>
+  document.getElementById('startBtn').addEventListener('click', ()=>{
+    if(window.parent && typeof window.parent.setUserName==='function'){
+      window.location.href = 'warning.html';
+    }else{
+      alert('Parent interface not ready. Please reload.');
+    }
+  });
+</script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_1.html

@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var6-color { background-color: rgba(76, 175, 80, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Jackson's mom promises $5 per hour spent on chores.</span>
+                    <span id="fact2" class="fact2-color">Jackson spends 2 hours vacuuming, and decides to do this twice.</span>
+                    <span id="fact3" class="fact3-color">He also spends 0.5 hours washing dishes.</span>
+                    <span id="fact4" class="fact4-color">He spends three times as long cleaning the bathroom as washing dishes.</span>
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Rate per hour: $5</span></li>
+                    <li><span class="fact2-color">Hours vacuuming (each time): 2</span></li>
+                    <li><span class="fact2-color">Number of times vacuuming: 2</span></li>
+                    <li><span class="fact3-color">Hours washing dishes: 0.5</span></li>
+                    <li><span class="fact4-color">Bathroom cleaning multiplier: 3</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>We need to calculate the total amount of money Jackson earned from all chores.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate total hours spent vacuuming</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">hours_vacuuming</span> = <span class="fact2-color">2</span> * <span class="fact2-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate money earned from vacuuming</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">vacuuming_money</span> = <span class="var1-color">hours_vacuuming</span> * <span class="fact1-color">5</span></span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate money earned from washing dishes</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">dishes_money</span> = <span class="fact3-color">0.5</span> * <span class="fact1-color">5</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate time spent cleaning the bathroom</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">bathroom_time</span> = <span class="fact3-color">0.5</span> * <span class="fact4-color">3</span></span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate money earned from cleaning the bathroom</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">bathroom_money</span> = <span class="var4-color">bathroom_time</span> * <span class="fact1-color">5</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate total money earned from all chores</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">12</span>
+                        <span><span class="var6-color">total_money</span> = <span class="var2-color">vacuuming_money</span> + <span class="var3-color">dishes_money</span> + <span class="var5-color">bathroom_money</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 6;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.hours_vacuuming = 2 * 2;
+                        break;
+                    case 2:
+                        this.variables.vacuuming_money = this.variables.hours_vacuuming * 5;
+                        break;
+                    case 3:
+                        this.variables.dishes_money = 0.5 * 5;
+                        break;
+                    case 4:
+                        // This is the wrong step
+                        this.variables.bathroom_time = 0.5 * 3;
+                        break;
+                    case 5:
+                        this.variables.bathroom_money = this.variables.bathroom_time * 5;
+                        break;
+                    case 6:
+                        this.variables.total_money = this.variables.vacuuming_money + this.variables.dishes_money + this.variables.bathroom_money;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                const oldVariables = {...this.variables};
+                this.variables = {};
+                for (let i = 1; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach(line => {
+                    line.classList.remove('current');
+                });
+                
+                if (this.currentStep >= 0) {
+                    const currentLines = document.querySelectorAll(`.code-line[data-step="${this.currentStep}"]`);
+                    currentLines.forEach(line => {
+                        line.classList.add('current');
+                    });
+                }
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep === this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['hours_vacuuming', 'vacuuming_money', 'dishes_money', 'bathroom_time', 'bathroom_money', 'total_money'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('money') ? `$${value}` : value;
+                        
+                        let itemClass = "variable-item " + colorClass;
+                        if (this.currentStep === this.wrongStep && varName === 'bathroom_time') {
+                            itemClass += " error-highlight";
+                        }
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'hours_vacuuming': 'var1-color',
+                    'vacuuming_money': 'var2-color',
+                    'dishes_money': 'var3-color',
+                    'bathroom_time': 'var4-color',
+                    'bathroom_money': 'var5-color',
+                    'total_money': 'var6-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_10.html

@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Two stores sell the same model of smartphone, but they offer it at different prices and with different discounts. Store A lists the smartphone at a full price of $125</span> and <span id="fact2" class="fact2-color">offers an additional discount of 8%</span>. <span id="fact3" class="fact3-color">Store B lists the same smartphone for $130</span> and <span id="fact4" class="fact4-color">offers an additional discount of 10%</span>. After both stores' discounts are applied, how much cheaper is store A's smartphone than store B's smartphone?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Store A full price: $125</span></li>
+                    <li><span class="fact2-color">Store A discount: 8%</span></li>
+                    <li><span class="fact3-color">Store B full price: $130</span></li>
+                    <li><span class="fact4-color">Store B discount: 10%</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>Calculate how much cheaper Store A's smartphone is than Store B's smartphone after discounts are applied.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the discount amount for Store A</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">store_A_discount</span> = <span class="fact1-color">125</span> * <span class="fact2-color">8</span> / 100</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the final price at Store A</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">store_A_price</span> = <span class="fact1-color">125</span> - <span class="var1-color">store_A_discount</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the discount amount for Store B</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">store_B_discount</span> = <span class="fact3-color">130</span> * <span class="fact4-color">10</span> / 100</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the final price at Store B</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">store_B_price</span> = <span class="fact3-color">130</span> - <span class="var3-color">store_B_discount</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate the price difference between Store A and Store B</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">price_difference</span> = <span class="var4-color">store_B_price</span> - <span class="var2-color">store_A_price</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 9;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.store_A_discount = 125 * 8 / 100;
+                        break;
+                    case 3:
+                        this.variables.store_A_price = 125 - this.variables.store_A_discount;
+                        break;
+                    case 5:
+                        this.variables.store_B_discount = 130 * 10 / 100;
+                        break;
+                    case 7:
+                        // This is the wrong step (step 4 in the unformatted info)
+                        if (step === this.wrongStep) {
+                            this.variables.store_B_price = 130 - this.variables.store_B_discount;
+                        } else {
+                            this.variables.store_B_price = 130 - this.variables.store_B_discount;
+                        }
+                        break;
+                    case 9:
+                        this.variables.price_difference = this.variables.store_B_price - this.variables.store_A_price;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 1; i <= this.currentStep; i += 2) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep === this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['store_A_discount', 'store_A_price', 'store_B_discount', 'store_B_price', 'price_difference'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const formattedValue = varName.includes('price') || varName.includes('discount') ? 
+                            `$${value.toFixed(2)}` : value.toFixed(2);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'store_A_discount': 'var1-color',
+                    'store_A_price': 'var2-color',
+                    'store_B_discount': 'var3-color',
+                    'store_B_price': 'var4-color',
+                    'price_difference': 'var5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_11.html

@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(0, 188, 212, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    A school is buying virus protection software to cover <span id="fact1" class="fact1-color">50 devices</span>. One software package costs <span id="fact2" class="fact2-color">$40</span> and covers up to <span id="fact3" class="fact3-color">5 devices</span>. The other software package costs <span id="fact4" class="fact4-color">$60</span> and covers up to <span id="fact5" class="fact5-color">10 devices</span>. How much money, in dollars, can the school save by buying the $60 software package instead of the $40 software package?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Total devices: 50</span></li>
+                    <li><span class="fact2-color">Cost of first package: $40</span></li>
+                    <li><span class="fact3-color">Devices covered by first package: 5</span></li>
+                    <li><span class="fact4-color">Cost of second package: $60</span></li>
+                    <li><span class="fact5-color">Devices covered by second package: 10</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How much money, in dollars, can the school save by buying the $60 software package instead of the $40 software package.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how many sets of 5 devices are in the school</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">sets_of_5_devices</span> = <span class="fact1-color">50</span> / <span class="fact3-color">5</span></span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate total cost for the $40 software package</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">cost_of_first_option</span> = <span class="fact2-color">40</span> * <span class="var1-color">sets_of_5_devices</span></span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate how many sets of 10 devices are in the school</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">sets_of_10_devices</span> = <span class="fact1-color">50</span> / <span class="fact5-color">10</span></span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate total cost for the $60 software package</span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">cost_of_second_option</span> = <span class="fact4-color">60</span> * <span class="var3-color">sets_of_10_devices</span></span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate the savings</span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">savings</span> = <span class="var2-color">cost_of_first_option</span> - <span class="var4-color">cost_of_second_option</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 10;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 2:
+                        this.variables.sets_of_5_devices = 50 / 5;
+                        break;
+                    case 4:
+                        this.variables.cost_of_first_option = 40 * this.variables.sets_of_5_devices;
+                        break;
+                    case 6:
+                        this.variables.sets_of_10_devices = 50 / 10;
+                        break;
+                    case 8:
+                        // This is the wrong step (step 4 in the unformatted information)
+                        if (step === this.wrongStep * 2) {
+                            // Intentionally introducing the error
+                            this.variables.cost_of_second_option = 60 * 5;
+                        } else {
+                            this.variables.cost_of_second_option = 60 * this.variables.sets_of_10_devices;
+                        }
+                        break;
+                    case 10:
+                        this.variables.savings = this.variables.cost_of_first_option - this.variables.cost_of_second_option;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [2, 4, 6, 8, 10];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                if (currentStep === -1) return executableSteps[0];
+                
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach(line => {
+                    const step = parseInt(line.getAttribute('data-step'));
+                    line.classList.toggle('current', step === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', isFirstStep);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['sets_of_5_devices', 'cost_of_first_option', 'sets_of_10_devices', 'cost_of_second_option', 'savings'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('cost') || varName === 'savings' ? `$${value}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'sets_of_5_devices': 'var1-color',
+                    'cost_of_first_option': 'var2-color',
+                    'sets_of_10_devices': 'var3-color',
+                    'cost_of_second_option': 'var4-color',
+                    'savings': 'var5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_12.html

@@ -0,0 +1,542 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var6-color { background-color: rgba(76, 175, 80, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    Robin wants to buy jelly bracelets for her friends. She decides to buy one bracelet for each letter of the first name of her friends. Her friends are Jessica, Tori, Lily and Patrice. If each jelly bracelet costs <span id="fact1" class="fact1-color">$2</span>, what is the total she will spend in dollars?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Cost per jelly bracelet: $2</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>The total amount Robin will spend on jelly bracelets for her friends.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Count the number of letters in Jessica's name</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">jessica_letters</span> = 7</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Count the number of letters in Tori's name</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">tori_letters</span> = 4</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Count the number of letters in Lily's name</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">lily_letters</span> = 4</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Count the number of letters in Patrice's name</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">patrice_letters</span> = 7</span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate the total number of bracelets needed</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">total_bracelets</span> = <span class="var1-color">jessica_letters</span> + <span class="var2-color">tori_letters</span> + <span class="var3-color">lily_letters</span> + <span class="var4-color">patrice_letters</span></span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate the total cost</span>
+                    </div>
+                    <div class="code-line" data-step="11">
+                        <span class="line-number">12</span>
+                        <span><span class="var6-color">total_cost</span> = <span class="var5-color">total_bracelets</span> * <span class="fact1-color">2</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 11;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.jessica_letters = 7;
+                        break;
+                    case 3:
+                        this.variables.tori_letters = 4;
+                        break;
+                    case 5:
+                        this.variables.lily_letters = 4;
+                        break;
+                    case 7:
+                        this.variables.patrice_letters = 7;
+                        break;
+                    case 9:
+                        this.variables.total_bracelets = this.variables.jessica_letters + this.variables.tori_letters + this.variables.lily_letters + this.variables.patrice_letters;
+                        break;
+                    case 11:
+                        // Intentionally introducing the error from the wrongstep
+                        if (step === this.wrongStep * 2 - 1) {
+                            this.variables.total_cost = this.variables.total_bracelets * 2;
+                        } else {
+                            this.variables.total_cost = this.variables.total_bracelets * 2;
+                        }
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7, 9, 11];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['jessica_letters', 'tori_letters', 'lily_letters', 'patrice_letters', 'total_bracelets', 'total_cost'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName === 'total_cost' ? `$${value}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'jessica_letters': 'var1-color',
+                    'tori_letters': 'var2-color',
+                    'lily_letters': 'var3-color',
+                    'patrice_letters': 'var4-color',
+                    'total_bracelets': 'var5-color',
+                    'total_cost': 'var6-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_13.html

@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var2-color { background-color: rgba(76, 175, 80, 0.5); }
+        .var3-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var4-color { background-color: rgba(96, 125, 139, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Leo has to write a 400-word story for his literature class.</span> <span id="fact2" class="fact2-color">10 words fit on each line of his notebook</span> <span id="fact3" class="fact3-color">20 lines fit on each page.</span> <span id="fact4" class="fact4-color">Lucas has filled one and a half pages.</span> How many words does he have left to write?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Total words required: 400</span></li>
+                    <li><span class="fact2-color">Words per line: 10</span></li>
+                    <li><span class="fact3-color">Lines per page: 20</span></li>
+                    <li><span class="fact4-color">Pages filled: 1.5</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many words Lucas has left to write.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how many lines are in half a page</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">lines_in_half_page</span> = <span class="fact3-color">20</span> / 2</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate total lines written</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">total_lines_written</span> = <span class="fact3-color">20</span> + <span class="var1-color">lines_in_half_page</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate words written so far</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">words_written</span> = <span class="var2-color">total_lines_written</span> * <span class="fact2-color">10</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate words left to write</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">words_left</span> = <span class="fact1-color">400</span> - <span class="var3-color">words_written</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.lines_in_half_page = 20 / 2;
+                        break;
+                    case 3:
+                        this.variables.total_lines_written = 20 + this.variables.lines_in_half_page;
+                        break;
+                    case 5:
+                        this.variables.words_written = this.variables.total_lines_written * 10;
+                        break;
+                    case 7:
+                        this.variables.words_left = 400 - this.variables.words_written;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['lines_in_half_page', 'total_lines_written', 'words_written', 'words_left'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'lines_in_half_page': 'var1-color',
+                    'total_lines_written': 'var2-color',
+                    'words_written': 'var3-color',
+                    'words_left': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_14.html

@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(0, 188, 212, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Valerie needs to put stamps on the envelopes she is about to mail.</span> She has thank you cards for each of her grandmother, uncle and aunt for the birthday presents they sent. <span id="fact2" class="fact2-color">She also has to pay the water bill and the electric bill separately.</span> <span id="fact3" class="fact3-color">She wants to send three more mail-in rebates than she does bills</span> and <span id="fact4" class="fact4-color">she has twice as many job applications as rebates to mail.</span> <span id="fact5" class="fact5-color">How many stamps does she need if everything needs 1 stamp except the electric bill, which needs 2?</span>
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Stamps needed per envelope: 1 (except electric bill)</span></li>
+                    <li><span class="fact2-color">Number of bills: 2 (water and electric)</span></li>
+                    <li><span class="fact3-color">Rebates: 3 more than bills</span></li>
+                    <li><span class="fact4-color">Job applications: 2 times rebates</span></li>
+                    <li><span class="fact5-color">Electric bill stamps: 2</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>The total number of stamps Valerie needs for all her mail.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate number of thank you cards</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">thank_you_cards</span> = 3 * 1</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Number of bills to mail</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">bills</span> = <span class="fact2-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate number of rebates</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">rebates</span> = <span class="var2-color">bills</span> + <span class="fact3-color">3</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate number of job applications</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">applications</span> = <span class="fact4-color">2</span> * <span class="var3-color">rebates</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate total pieces of mail</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">total_mail</span> = <span class="var1-color">thank_you_cards</span> + <span class="var2-color">bills</span> + <span class="var3-color">rebates</span> + <span class="var4-color">applications</span></span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate total stamps needed (extra stamp for electric bill)</span>
+                    </div>
+                    <div class="code-line" data-step="11">
+                        <span class="line-number">12</span>
+                        <span>total_stamps = <span class="var5-color">total_mail</span> + 1</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 11;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.thank_you_cards = 3 * 1;
+                        break;
+                    case 3:
+                        this.variables.bills = 2;
+                        break;
+                    case 5:
+                        this.variables.rebates = this.variables.bills + 3;
+                        break;
+                    case 7:
+                        this.variables.applications = 2 * this.variables.rebates;
+                        break;
+                    case 9:
+                        // This is the wrong step (step 5 in the unformatted info)
+                        if (step === this.wrongStep) {
+                            this.variables.total_mail = this.variables.thank_you_cards + this.variables.bills + this.variables.rebates + this.variables.applications;
+                        } else {
+                            this.variables.total_mail = this.variables.thank_you_cards + this.variables.bills + this.variables.rebates + this.variables.applications;
+                        }
+                        break;
+                    case 11:
+                        this.variables.total_stamps = this.variables.total_mail + 1;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7, 9, 11];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['thank_you_cards', 'bills', 'rebates', 'applications', 'total_mail', 'total_stamps'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'thank_you_cards': 'var1-color',
+                    'bills': 'var2-color',
+                    'rebates': 'var3-color',
+                    'applications': 'var4-color',
+                    'total_mail': 'var5-color',
+                    'total_stamps': 'fact5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_15.html

@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var6-color { background-color: rgba(76, 175, 80, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Maddox and Theo both bought 3 Polaroid Cameras</span>, each sold at <span id="fact2" class="fact2-color">$20 per camera</span> from Amazon, and decided to sell them on eBay. Maddox sold his cameras at <span id="fact3" class="fact3-color">$28 each</span>, while Theo sold his cameras at <span id="fact4" class="fact4-color">$23 each</span>. How much more profit did Maddox get from the sale of his cameras than Theo?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Number of cameras bought by each person: 3</span></li>
+                    <li><span class="fact2-color">Cost per camera: $20</span></li>
+                    <li><span class="fact3-color">Maddox's selling price per camera: $28</span></li>
+                    <li><span class="fact4-color">Theo's selling price per camera: $23</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How much more profit did Maddox get from the sale of his cameras than Theo?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the total cost of buying 3 cameras for each person</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">total_cost_each</span> = <span class="fact1-color">3</span> * <span class="fact2-color">20</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate Maddox's total revenue</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">maddox_revenue</span> = <span class="fact3-color">28</span> * <span class="fact1-color">3</span></span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate Maddox's profit</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">maddox_profit</span> = <span class="var2-color">maddox_revenue</span> - <span class="var1-color">total_cost_each</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate Theo's total revenue</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">theo_revenue</span> = <span class="fact4-color">23</span> * <span class="fact1-color">3</span></span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate Theo's profit</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">theo_profit</span> = <span class="var4-color">theo_revenue</span> - <span class="var1-color">total_cost_each</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate how much more profit Maddox made than Theo</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">12</span>
+                        <span><span class="var6-color">profit_difference</span> = <span class="var3-color">maddox_profit</span> - <span class="var5-color">theo_profit</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 6;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.total_cost_each = 3 * 20;
+                        break;
+                    case 2:
+                        this.variables.maddox_revenue = 28 * 3;
+                        break;
+                    case 3:
+                        this.variables.maddox_profit = this.variables.maddox_revenue - this.variables.total_cost_each;
+                        break;
+                    case 4:
+                        // This is the wrong step according to the wrongstep tag
+                        this.variables.theo_revenue = 23 * 3;
+                        break;
+                    case 5:
+                        this.variables.theo_profit = this.variables.theo_revenue - this.variables.total_cost_each;
+                        break;
+                    case 6:
+                        this.variables.profit_difference = this.variables.maddox_profit - this.variables.theo_profit;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 1; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach(line => {
+                    line.classList.remove('current');
+                });
+                
+                if (this.currentStep > 0) {
+                    const currentLines = document.querySelectorAll(`.code-line[data-step="${this.currentStep}"]`);
+                    currentLines.forEach(line => {
+                        line.classList.add('current');
+                    });
+                }
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep <= 0);
+                this.nextBtn.classList.toggle('disabled', this.currentStep >= this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['total_cost_each', 'maddox_revenue', 'maddox_profit', 'theo_revenue', 'theo_profit', 'profit_difference'];
+                const colorClasses = {
+                    'total_cost_each': 'var1-color',
+                    'maddox_revenue': 'var2-color',
+                    'maddox_profit': 'var3-color',
+                    'theo_revenue': 'var4-color',
+                    'theo_profit': 'var5-color',
+                    'profit_difference': 'var6-color'
+                };
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = colorClasses[varName];
+                        const displayValue = varName.includes('cost') || varName.includes('revenue') || varName.includes('profit') ? 
+                            `$${value}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_16.html

@@ -0,0 +1,551 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .fact6-color { background-color: rgba(76, 175, 80, 0.5); }
+        .fact7-color { background-color: rgba(255, 87, 34, 0.5); }
+        .fact8-color { background-color: rgba(96, 125, 139, 0.5); }
+        .fact9-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var1-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var2-color { background-color: rgba(63, 81, 181, 0.5); }
+        .var3-color { background-color: rgba(255, 152, 0, 0.5); }
+        .var4-color { background-color: rgba(0, 188, 212, 0.5); }
+        .var5-color { background-color: rgba(139, 195, 74, 0.5); }
+        .var6-color { background-color: rgba(158, 158, 158, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    The teacher decided to rewards his students with extra recess on report card day if they got good grades. Students normally get <span id="fact1" class="fact1-color">20 minutes</span> for recess. He told the students that every A got them <span id="fact2" class="fact2-color">2 extra minutes</span> of recess. Every B got them <span id="fact3" class="fact3-color">one extra minute</span>. Every C got them <span id="fact4" class="fact4-color">zero extra minutes</span>, but every D got them <span id="fact5" class="fact5-color">1 less minute</span>. When report cards came out there were <span id="fact6" class="fact6-color">10 As</span>, <span id="fact7" class="fact7-color">12 Bs</span>, <span id="fact8" class="fact8-color">14 Cs</span>, and <span id="fact9" class="fact9-color">5 Ds</span>. In total, how much recess would the students get that day?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Normal recess time: 20 minutes</span></li>
+                    <li><span class="fact2-color">Extra minutes per A: 2</span></li>
+                    <li><span class="fact3-color">Extra minutes per B: 1</span></li>
+                    <li><span class="fact4-color">Extra minutes per C: 0</span></li>
+                    <li><span class="fact5-color">Minutes lost per D: 1</span></li>
+                    <li><span class="fact6-color">Number of As: 10</span></li>
+                    <li><span class="fact7-color">Number of Bs: 12</span></li>
+                    <li><span class="fact8-color">Number of Cs: 14</span></li>
+                    <li><span class="fact9-color">Number of Ds: 5</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>The total amount of recess time the students would get that day.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># The students have 20 minutes to start</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">base_recess</span> = <span class="fact1-color">20</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate extra minutes from As</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">extra_from_As</span> = <span class="fact6-color">10</span> * <span class="fact2-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate extra minutes from Bs</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">extra_from_Bs</span> = <span class="fact7-color">12</span> * <span class="fact3-color">1</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate extra minutes from Cs</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">extra_from_Cs</span> = <span class="fact8-color">14</span> * <span class="fact4-color">0</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate minutes lost from Ds</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">lost_from_Ds</span> = <span class="fact9-color">5</span> * <span class="fact5-color">1</span></span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate total recess time</span>
+                    </div>
+                    <div class="code-line" data-step="11">
+                        <span class="line-number">12</span>
+                        <span><span class="var6-color">total_recess</span> = <span class="var1-color">base_recess</span> + <span class="var2-color">extra_from_As</span> + <span class="var3-color">extra_from_Bs</span> - <span class="var5-color">lost_from_Ds</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 11;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.base_recess = 20;
+                        break;
+                    case 3:
+                        this.variables.extra_from_As = 10 * 2;
+                        break;
+                    case 5:
+                        this.variables.extra_from_Bs = 12 * 1;
+                        break;
+                    case 7:
+                        this.variables.extra_from_Cs = 14 * 0;
+                        break;
+                    case 9:
+                        this.variables.lost_from_Ds = 5 * 1;
+                        break;
+                    case 11:
+                        this.variables.total_recess = this.variables.base_recess + this.variables.extra_from_As + this.variables.extra_from_Bs - this.variables.lost_from_Ds;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7, 9, 11];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['base_recess', 'extra_from_As', 'extra_from_Bs', 'extra_from_Cs', 'lost_from_Ds', 'total_recess'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'base_recess': 'var1-color',
+                    'extra_from_As': 'var2-color',
+                    'extra_from_Bs': 'var3-color',
+                    'extra_from_Cs': 'var4-color',
+                    'lost_from_Ds': 'var5-color',
+                    'total_recess': 'var6-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_17.html

@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Hot dog buns come in packages of 8.</span> For the school picnic, <span id="fact2" class="fact2-color">Mr. Gates bought 30 packages of hot dog buns.</span> He has <span id="fact3" class="fact3-color">four classes</span> with <span id="fact4" class="fact4-color">30 students in each class.</span> How many hot dog buns can each of Mr. Gates' students get?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Buns per package: 8</span></li>
+                    <li><span class="fact2-color">Packages bought: 30</span></li>
+                    <li><span class="fact3-color">Number of classes: 4</span></li>
+                    <li><span class="fact4-color">Students per class: 30</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many hot dog buns each student can get.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the total number of hot dog buns Mr. Gates bought</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">total_buns</span> = <span class="fact2-color">30</span> * <span class="fact1-color">8</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the total number of students in Mr. Gates' classes</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">total_students</span> = <span class="fact3-color">4</span> * <span class="fact4-color">30</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate how many hot dog buns each student can get</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">buns_per_student</span> = <span class="var1-color">total_buns</span> / <span class="var2-color">total_students</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.total_buns = 30 * 8;
+                        break;
+                    case 3:
+                        // This is the wrong step - using wrong calculation
+                        if (step === this.wrongStep) {
+                            this.variables.total_students = 4 * 30;
+                        } else {
+                            this.variables.total_students = 4 * 30;
+                        }
+                        break;
+                    case 5:
+                        this.variables.buns_per_student = this.variables.total_buns / this.variables.total_students;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['total_buns', 'total_students', 'buns_per_student'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'total_buns': 'var1-color',
+                    'total_students': 'var2-color',
+                    'buns_per_student': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_18.html

@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Every day, Lou works out by running three miles on a circular track that is one-quarter of a mile long.</span> <span id="fact2" class="fact2-color">His wife, Rosie, also runs on the same track at the same time as her husband, but she runs at twice the speed of her husband.</span> During their workout, how many times does Rosie circle the track?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Lou's running distance: 3 miles</span></li>
+                    <li><span class="fact1-color">Track length: 1/4 mile</span></li>
+                    <li><span class="fact2-color">Rosie's speed: 2 times Lou's speed</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>During their workout, how many times does Rosie circle the track?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how many times Lou circles the track</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">lou_circles</span> = <span class="fact1-color">3</span> / (<span class="fact1-color">1/4</span>)</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate Rosie's distance based on speed ratio</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">rosie_distance</span> = <span class="fact1-color">3</span> * <span class="fact2-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate how many times Rosie circles the track</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">rosie_circles</span> = <span class="var2-color">rosie_distance</span> / (<span class="fact1-color">1/4</span>)</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.lou_circles = 3 / (1/4);
+                        break;
+                    case 3:
+                        // This is the wrong step as indicated in the unformatted information
+                        this.variables.rosie_distance = 3 * 2;
+                        break;
+                    case 5:
+                        this.variables.rosie_circles = this.variables.rosie_distance / (1/4);
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['lou_circles', 'rosie_distance', 'rosie_circles'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'lou_circles': 'var1-color',
+                    'rosie_distance': 'var2-color',
+                    'rosie_circles': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_19.html

@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">There are 325 students in a local high school.</span> <span id="fact2" class="fact2-color">40 percent of the students have glasses</span>, how many students do not have glasses?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Total students: 325</span></li>
+                    <li><span class="fact2-color">Percentage of students with glasses: 40%</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many students do not have glasses.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Find the percentage of students who do not have glasses</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">percentage_without_glasses</span> = 100 - <span class="fact2-color">40</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate 10% of the total number of students</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">ten_percent</span> = <span class="fact1-color">325</span> * 0.10</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Multiply the 10% value by 6 to get 60% (students without glasses)</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">students_without_glasses</span> = <span class="var2-color">ten_percent</span> * 6</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.percentage_without_glasses = 100 - 40;
+                        break;
+                    case 3:
+                        this.variables.ten_percent = 325 * 0.10;
+                        break;
+                    case 5:
+                        this.variables.students_without_glasses = this.variables.ten_percent * 6;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['percentage_without_glasses', 'ten_percent', 'students_without_glasses'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'percentage_without_glasses': 'var1-color',
+                    'ten_percent': 'var2-color',
+                    'students_without_glasses': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_2.html

@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Jean has 60 stuffies.</span> She keeps <span id="fact2" class="fact2-color">1/3</span> of them and then gives away the rest. She gives <span id="fact3" class="fact3-color">1/4</span> of what she gave away to her sister Janet. How many stuffies did Janet get?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Total stuffies: 60</span></li>
+                    <li><span class="fact2-color">Fraction kept: 1/3</span></li>
+                    <li><span class="fact3-color">Fraction given to Janet: 1/4</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many stuffies Janet received.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how many stuffies Jean kept</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">stuffies_kept</span> = <span class="fact1-color">60</span> / <span class="fact2-color">3</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate how many stuffies Jean gave away</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">stuffies_given_away</span> = <span class="fact1-color">60</span> - <span class="var1-color">stuffies_kept</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate how many stuffies Janet received</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">stuffies_to_janet</span> = <span class="var2-color">stuffies_given_away</span> / <span class="fact3-color">4</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.stuffies_kept = 60 / 3;
+                        break;
+                    case 3:
+                        // This is the wrong step as indicated in the unformatted information
+                        this.variables.stuffies_given_away = 60 - this.variables.stuffies_kept;
+                        break;
+                    case 5:
+                        this.variables.stuffies_to_janet = this.variables.stuffies_given_away / 4;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['stuffies_kept', 'stuffies_given_away', 'stuffies_to_janet'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'stuffies_kept': 'var1-color',
+                    'stuffies_given_away': 'var2-color',
+                    'stuffies_to_janet': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_20.html

@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    A party of <span id="fact1" class="fact1-color">4</span> order <span id="fact2" class="fact2-color">3 dozen oysters on the half shell for $15.00 a dozen</span>, <span id="fact3" class="fact3-color">2 pounds of steamed shrimp for $14.00 a pound</span> and <span id="fact4" class="fact4-color">2 pounds of fried clams for $13.50 a pound</span>. If they split the bill equally, how much will they each owe?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Number of people: 4</span></li>
+                    <li><span class="fact2-color">Oysters: 3 dozen at $15.00 per dozen</span></li>
+                    <li><span class="fact3-color">Shrimp: 2 pounds at $14.00 per pound</span></li>
+                    <li><span class="fact4-color">Fried clams: 2 pounds at $13.50 per pound</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How much each person will owe when splitting the bill equally.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate cost of oysters</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">oyster_cost</span> = <span class="fact2-color">3</span> * <span class="fact2-color">15.00</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate cost of shrimp</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">shrimp_cost</span> = <span class="fact3-color">2</span> * <span class="fact3-color">14.00</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate cost of fried clams</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">clam_cost</span> = <span class="fact4-color">2</span> * <span class="fact4-color">13.50</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate total bill</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">total_bill</span> = <span class="var1-color">oyster_cost</span> + <span class="var2-color">shrimp_cost</span> + <span class="var3-color">clam_cost</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate cost per person</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">cost_per_person</span> = <span class="var4-color">total_bill</span> / <span class="fact1-color">4</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 9;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.oyster_cost = 3 * 15.00;
+                        break;
+                    case 3:
+                        this.variables.shrimp_cost = 2 * 14.00;
+                        break;
+                    case 5:
+                        // This is the wrong step according to the unformatted information
+                        this.variables.clam_cost = 2 * 13.50;
+                        break;
+                    case 7:
+                        this.variables.total_bill = this.variables.oyster_cost + this.variables.shrimp_cost + this.variables.clam_cost;
+                        break;
+                    case 9:
+                        this.variables.cost_per_person = this.variables.total_bill / 4;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 0; i <= this.currentStep; i++) {
+                    if (i % 2 === 1) { // Only execute code lines, not comments
+                        this.executeStep(i);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.remove('current');
+                    if (index === this.currentStep) {
+                        line.classList.add('current');
+                    }
+                });
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep <= 0);
+                this.nextBtn.classList.toggle('disabled', this.currentStep >= this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['oyster_cost', 'shrimp_cost', 'clam_cost', 'total_bill', 'cost_per_person'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        let displayValue = value;
+                        
+                        // Format currency values
+                        if (varName.includes('cost') || varName.includes('bill')) {
+                            displayValue = `$${value.toFixed(2)}`;
+                        }
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'oyster_cost': 'var1-color',
+                    'shrimp_cost': 'var2-color',
+                    'clam_cost': 'var3-color',
+                    'total_bill': 'var4-color',
+                    'cost_per_person': 'var5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_21.html

@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Ms. Warren ran at 6 mph for 20 minutes.</span> <span id="fact2" class="fact2-color">After the run, she walked at 2 mph for 30 minutes.</span> How many miles did she run and walk in total?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Running speed: 6 mph</span></li>
+                    <li><span class="fact1-color">Running time: 20 minutes</span></li>
+                    <li><span class="fact2-color">Walking speed: 2 mph</span></li>
+                    <li><span class="fact2-color">Walking time: 30 minutes</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many miles did Ms. Warren run and walk in total?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Convert running time from minutes to hours</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">running_time_hours</span> = <span class="fact1-color">20</span> / 60</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the distance Ms. Warren ran</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">running_distance</span> = <span class="fact1-color">6</span> / 3</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Convert walking time from minutes to hours</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">walking_time_hours</span> = <span class="fact2-color">30</span> / 60</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the distance Ms. Warren walked</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">walking_distance</span> = <span class="fact2-color">2</span> * <span class="var3-color">walking_time_hours</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate the total distance</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">total_distance</span> = <span class="var2-color">running_distance</span> + <span class="var4-color">walking_distance</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 9;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.running_time_hours = 20 / 60;
+                        break;
+                    case 3:
+                        // Intentionally keeping the error as per instructions
+                        this.variables.running_distance = 6 / 3;
+                        break;
+                    case 5:
+                        this.variables.walking_time_hours = 30 / 60;
+                        break;
+                    case 7:
+                        this.variables.walking_distance = 2 * this.variables.walking_time_hours;
+                        break;
+                    case 9:
+                        this.variables.total_distance = this.variables.running_distance + this.variables.walking_distance;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7, 9];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['running_time_hours', 'running_distance', 'walking_time_hours', 'walking_distance', 'total_distance'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'running_time_hours': 'var1-color',
+                    'running_distance': 'var2-color',
+                    'walking_time_hours': 'var3-color',
+                    'walking_distance': 'var4-color',
+                    'total_distance': 'var5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_22.html

@@ -0,0 +1,517 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(0, 188, 212, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    Jimmy wants to order a pizza at a new place. <span id="fact1" class="fact1-color">The large pizza costs $10.00</span> and is <span id="fact2" class="fact2-color">cut into 8 slices</span>. <span id="fact3" class="fact3-color">The first topping costs $2.00</span>, <span id="fact4" class="fact4-color">the next 2 toppings cost $1.00 each</span> and <span id="fact5" class="fact5-color">the rest of the toppings cost $0.50</span>. If he orders a large pizza with pepperoni, sausage, ham, olives, mushrooms, bell peppers and pineapple. How much will his pizza cost per slice?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Large pizza cost: $10.00</span></li>
+                    <li><span class="fact2-color">Number of slices: 8</span></li>
+                    <li><span class="fact3-color">First topping cost: $2.00</span></li>
+                    <li><span class="fact4-color">Next 2 toppings cost: $1.00 each</span></li>
+                    <li><span class="fact5-color">Remaining toppings cost: $0.50 each</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How much will Jimmy's pizza cost per slice?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate initial cost with base pizza and first topping</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">initial_cost</span> = <span class="fact1-color">10</span> + <span class="fact3-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate cost of the next 2 toppings</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">middle_toppings_cost</span> = 2 * <span class="fact4-color">1</span></span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate cost of the remaining toppings</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">remaining_toppings_cost</span> = 4 * <span class="fact5-color">0.50</span></span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate total cost of the pizza with all toppings</span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">total_cost</span> = <span class="var1-color">initial_cost</span> + <span class="var2-color">middle_toppings_cost</span> + <span class="var3-color">remaining_toppings_cost</span></span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate cost per slice</span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">cost_per_slice</span> = <span class="var4-color">total_cost</span> / <span class="fact2-color">8</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 10;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps - 1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps - 1) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps - 1) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1: // Comment line
+                        break;
+                    case 2: // initial_cost = 10 + 2
+                        this.variables.initial_cost = 10 + 2;
+                        break;
+                    case 3: // Comment line
+                        break;
+                    case 4: // middle_toppings_cost = 2 * 1
+                        this.variables.middle_toppings_cost = 2 * 1;
+                        break;
+                    case 5: // Comment line
+                        break;
+                    case 6: // remaining_toppings_cost = 4 * 0.50
+                        // This is the wrong step (step 3 in the unformatted info)
+                        if (this.wrongStep === 3) {
+                            this.variables.remaining_toppings_cost = 4 * 0.50;
+                        } else {
+                            this.variables.remaining_toppings_cost = 4 * 0.50;
+                        }
+                        break;
+                    case 7: // Comment line
+                        break;
+                    case 8: // total_cost = initial_cost + middle_toppings_cost + remaining_toppings_cost
+                        this.variables.total_cost = this.variables.initial_cost + this.variables.middle_toppings_cost + this.variables.remaining_toppings_cost;
+                        break;
+                    case 9: // Comment line
+                        break;
+                    case 10: // cost_per_slice = total_cost / 8
+                        this.variables.cost_per_slice = this.variables.total_cost / 8;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 0; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.remove('current');
+                    if (index === this.currentStep) {
+                        line.classList.add('current');
+                    }
+                });
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep === this.totalSteps - 1);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['initial_cost', 'middle_toppings_cost', 'remaining_toppings_cost', 'total_cost', 'cost_per_slice'];
+                const colorClasses = {
+                    'initial_cost': 'var1-color',
+                    'middle_toppings_cost': 'var2-color',
+                    'remaining_toppings_cost': 'var3-color',
+                    'total_cost': 'var4-color',
+                    'cost_per_slice': 'var5-color'
+                };
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const formattedValue = varName === 'cost_per_slice' ? `$${value.toFixed(2)}` : `$${value.toFixed(2)}`;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_23.html

@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .fact6-color { background-color: rgba(76, 175, 80, 0.5); }
+        .fact7-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var1-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var4-color { background-color: rgba(63, 81, 181, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">A pet store owner had 12 birds</span>, <span id="fact2" class="fact2-color">9 puppies</span>, <span id="fact3" class="fact3-color">5 cats</span>, and <span id="fact4" class="fact4-color">15 spiders</span>. <span id="fact5" class="fact5-color">Half the birds were sold</span> and <span id="fact6" class="fact6-color">3 puppies were adopted</span>. Then, someone left the spider enclosure open and <span id="fact7" class="fact7-color">7 of them went loose</span>. How many animals does the pet store owner have left?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Starting birds: 12</span></li>
+                    <li><span class="fact2-color">Starting puppies: 9</span></li>
+                    <li><span class="fact3-color">Starting cats: 5</span></li>
+                    <li><span class="fact4-color">Starting spiders: 15</span></li>
+                    <li><span class="fact5-color">Birds sold: 1/2 of total</span></li>
+                    <li><span class="fact6-color">Puppies adopted: 3</span></li>
+                    <li><span class="fact7-color">Spiders escaped: 7</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How many animals does the pet store owner have left?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how many birds are left after half were sold</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">birds_left</span> = <span class="fact1-color">12</span> // <span class="fact5-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate how many puppies are left after 3 were adopted</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">puppies_left</span> = <span class="fact2-color">9</span> - <span class="fact6-color">3</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate how many spiders are left after 7 escaped</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">spiders_left</span> = <span class="fact4-color">15</span> - <span class="fact7-color">7</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the total number of animals left</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">total_animals_left</span> = <span class="fact3-color">5</span> + <span class="var1-color">birds_left</span> + <span class="var2-color">puppies_left</span> + <span class="var3-color">spiders_left</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= 7) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.birds_left = Math.floor(12 / 2);
+                        break;
+                    case 3:
+                        this.variables.puppies_left = 9 - 3;
+                        break;
+                    case 5:
+                        // This is the wrong step as indicated
+                        this.variables.spiders_left = 15 - 7;
+                        break;
+                    case 7:
+                        this.variables.total_animals_left = 5 + this.variables.birds_left + this.variables.puppies_left + this.variables.spiders_left;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['birds_left', 'puppies_left', 'spiders_left', 'total_animals_left'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'birds_left': 'var1-color',
+                    'puppies_left': 'var2-color',
+                    'spiders_left': 'var3-color',
+                    'total_animals_left': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_24.html

@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Annie has 6 barrettes</span>, <span id="fact2" class="fact2-color">twice as many scrunchies as barrettes</span>, and <span id="fact3" class="fact3-color">three fewer bobby pins than barrettes</span>. What percentage of her hair decorations are bobby pins, rounded to the nearest percent?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Barrettes: 6</span></li>
+                    <li><span class="fact2-color">Scrunchies: twice as many as barrettes</span></li>
+                    <li><span class="fact3-color">Bobby pins: three fewer than barrettes</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>The percentage of hair decorations that are bobby pins, rounded to the nearest percent.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># First find the total number of scrunchies</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">scrunchies</span> = <span class="fact1-color">6</span> * 2</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Then subtract three fewer bobby pins than barrettes</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">bobby_pins</span> = <span class="fact1-color">6</span> - 3</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Then add the number of each type of hair decorations to find the total number</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_decorations</span> = <span class="fact1-color">6</span> + <span class="var1-color">scrunchies</span> + <span class="var2-color">bobby_pins</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Then divide the number of bobby pins by the total number of decorations and multiply by 100% to express the answer as a percentage</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">percentage</span> = (<span class="var2-color">bobby_pins</span> / <span class="var3-color">total_decorations</span>) * 100</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.scrunchies = 6 * 2;
+                        break;
+                    case 3:
+                        // This is the wrong step - it should be 6 - 3 = 3
+                        this.variables.bobby_pins = 6 - 3;
+                        break;
+                    case 5:
+                        this.variables.total_decorations = 6 + this.variables.scrunchies + this.variables.bobby_pins;
+                        break;
+                    case 7:
+                        this.variables.percentage = (this.variables.bobby_pins / this.variables.total_decorations) * 100;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['scrunchies', 'bobby_pins', 'total_decorations', 'percentage'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName === 'percentage' ? `${value.toFixed(2)}%` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'scrunchies': 'var1-color',
+                    'bobby_pins': 'var2-color',
+                    'total_decorations': 'var3-color',
+                    'percentage': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_25.html

@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    The total number of <span id="fact1" class="fact1-color">lions in a park is twice the number of leopards in the same park</span>. The <span id="fact2" class="fact2-color">number of elephants is half the combined number of lions and leopards</span>. Calculate the total population of the three animals in the park if the <span id="fact3" class="fact3-color">number of lions is 200</span>.
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Lions : 2 × leopards</span></li>
+                    <li><span class="fact2-color">Elephants : 0.5 × (lions + leopards)</span></li>
+                    <li><span class="fact3-color">Lions : 200</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>Calculate the total population of the three animals (lions, leopards, and elephants) in the park.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the number of leopards from the number of lions</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">leopards</span> = <span class="fact3-color">200</span> / 2</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the total population of lions and leopards</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">lions_and_leopards</span> = <span class="fact3-color">200</span> + <span class="var1-color">leopards</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the number of elephants</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">elephants</span> = <span class="var2-color">lions_and_leopards</span> * (1/2)</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the total population of all three animals</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">total_animals</span> = <span class="var3-color">elephants</span> + <span class="var2-color">lions_and_leopards</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.leopards = 200 / 2;
+                        break;
+                    case 3:
+                        this.variables.lions_and_leopards = 200 + this.variables.leopards;
+                        break;
+                    case 5:
+                        this.variables.elephants = this.variables.lions_and_leopards * (1/2);
+                        break;
+                    case 7:
+                        this.variables.total_animals = this.variables.elephants + this.variables.lions_and_leopards;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['leopards', 'lions_and_leopards', 'elephants', 'total_animals'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'leopards': 'var1-color',
+                    'lions_and_leopards': 'var2-color',
+                    'elephants': 'var3-color',
+                    'total_animals': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_26.html

@@ -0,0 +1,539 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .fact6-color { background-color: rgba(76, 175, 80, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(0, 188, 212, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Janice can type 6 sentences per minute.</span> Today at work, Janice continued working on a paper she started typing yesterday. <span id="fact2" class="fact2-color">She typed for 20 minutes</span>, took a break, and <span id="fact3" class="fact3-color">typed 15 minutes longer</span>. <span id="fact4" class="fact4-color">She then had to erase 40 sentences she had typed incorrectly.</span> After a meeting, <span id="fact5" class="fact5-color">she typed for 18 minutes more</span>. <span id="fact6" class="fact6-color">In all, the paper had 536 sentences by the end of today.</span> How many sentences did she start with today?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Typing speed: 6 sentences per minute</span></li>
+                    <li><span class="fact2-color">First typing session: 20 minutes</span></li>
+                    <li><span class="fact3-color">Second typing session: 15 minutes</span></li>
+                    <li><span class="fact4-color">Erased sentences: 40 sentences</span></li>
+                    <li><span class="fact5-color">Third typing session: 18 minutes</span></li>
+                    <li><span class="fact6-color">Final sentence count: 536 sentences</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How many sentences did Janice start with today (from yesterday's work).</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Janice had X sentences from yesterday already typed to start with today</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">X</span> = 0  # Unknown starting sentences</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Janice typed 6 * 20 = 120 sentences before her break</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">first_session</span> = <span class="fact1-color">6</span> * <span class="fact2-color">20</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># She typed 6 * 15 = 90 sentences after her break</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">second_session</span> = <span class="fact1-color">6</span> * <span class="fact3-color">15</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># She typed 6 * 18 = 108 sentences after her meeting</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">third_session</span> = <span class="fact1-color">6</span> * <span class="fact5-color">18</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Therefore, she typed 120 + 90 + 108 = 318 sentences today in all</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">total_typed_today</span> = <span class="var2-color">first_session</span> + <span class="var3-color">second_session</span> + <span class="var4-color">third_session</span></span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">11</span>
+                        <span class="comment"># She had to erase 40 sentences, so she had 318 - 40 = 278 sentences that she typed today left</span>
+                    </div>
+                    <div class="code-line" data-step="11">
+                        <span class="line-number">12</span>
+                        <span><span class="var1-color">net_added_today</span> = <span class="var5-color">total_typed_today</span> - <span class="fact4-color">40</span></span>
+                    </div>
+                    <div class="code-line" data-step="12">
+                        <span class="line-number">13</span>
+                        <span class="comment"># The paper had X + 278 = 536 sentences at the end of today</span>
+                    </div>
+                    <div class="code-line" data-step="13">
+                        <span class="line-number">14</span>
+                        <span><span class="fact6-color">final_count</span> = <span class="var1-color">X</span> + <span class="var1-color">net_added_today</span></span>
+                    </div>
+                    <div class="code-line" data-step="14">
+                        <span class="line-number">15</span>
+                        <span class="comment"># Thus, she had X = 536 - 278 = 258 sentences typed on the paper to start with today</span>
+                    </div>
+                    <div class="code-line" data-step="15">
+                        <span class="line-number">16</span>
+                        <span><span class="var1-color">X</span> = <span class="fact6-color">536</span> - <span class="var1-color">net_added_today</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 15;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.X = 0;
+                        break;
+                    case 3:
+                        this.variables.first_session = 6 * 20;
+                        break;
+                    case 5:
+                        // This is the wrong step - it should be 15 minutes longer (35 minutes)
+                        // but we'll keep the error as instructed
+                        this.variables.second_session = 6 * 15;
+                        break;
+                    case 7:
+                        this.variables.third_session = 6 * 18;
+                        break;
+                    case 9:
+                        this.variables.total_typed_today = this.variables.first_session + this.variables.second_session + this.variables.third_session;
+                        break;
+                    case 11:
+                        this.variables.net_added_today = this.variables.total_typed_today - 40;
+                        break;
+                    case 13:
+                        this.variables.final_count = this.variables.X + this.variables.net_added_today;
+                        break;
+                    case 15:
+                        this.variables.X = 536 - this.variables.net_added_today;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 0; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.remove('current');
+                    if (index === this.currentStep) {
+                        line.classList.add('current');
+                    }
+                });
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep <= 0);
+                this.nextBtn.classList.toggle('disabled', this.currentStep >= this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['X', 'first_session', 'second_session', 'third_session', 'total_typed_today', 'net_added_today', 'final_count'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'X': 'var1-color',
+                    'first_session': 'var2-color',
+                    'second_session': 'var3-color',
+                    'third_session': 'var4-color',
+                    'total_typed_today': 'var5-color',
+                    'net_added_today': 'var1-color',
+                    'final_count': 'fact6-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_27.html

@@ -0,0 +1,482 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var2-color { background-color: rgba(76, 175, 80, 0.5); }
+        .var3-color { background-color: rgba(255, 87, 34, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Alice made 52 friendship bracelets over spring break to sell at school.</span> <span id="fact2" class="fact2-color">It only cost her $3.00 in materials to make these bracelets.</span> <span id="fact3" class="fact3-color">During the break, she gave 8 of her bracelets away.</span> <span id="fact4" class="fact4-color">Back at school, she sells all of the remaining bracelets at $0.25 each.</span> How much profit did she make (money earned after paying initial costs) on the sale of her bracelets?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Total bracelets made: 52</span></li>
+                    <li><span class="fact2-color">Cost of materials: $3.00</span></li>
+                    <li><span class="fact3-color">Bracelets given away: 8</span></li>
+                    <li><span class="fact4-color">Selling price per bracelet: $0.25</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How much profit Alice made (money earned after paying initial costs) on the sale of her bracelets.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate remaining bracelets after giving some away</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">remaining_bracelets</span> = <span class="fact1-color">52</span> - <span class="fact3-color">8</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate total sales from selling the remaining bracelets</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">total_sales</span> = <span class="var1-color">remaining_bracelets</span> * <span class="fact4-color">0.25</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate profit by subtracting material costs from total sales</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">profit</span> = <span class="var2-color">total_sales</span> - <span class="fact2-color">3.00</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.currentStep++;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.remaining_bracelets = 52 - 8;
+                        break;
+                    case 3:
+                        // This is the wrong step as indicated in the unformatted information
+                        this.variables.total_sales = this.variables.remaining_bracelets * 0.25;
+                        break;
+                    case 5:
+                        this.variables.profit = this.variables.total_sales - 3.00;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 1; i <= this.currentStep; i += 2) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.remove('current');
+                });
+                
+                if (this.currentStep >= 0) {
+                    this.codeLines[this.currentStep].classList.add('current');
+                }
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep <= -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep >= this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['remaining_bracelets', 'total_sales', 'profit'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('sales') || varName.includes('profit') ? 
+                            `$${value.toFixed(2)}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'remaining_bracelets': 'var1-color',
+                    'total_sales': 'var2-color',
+                    'profit': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_28.html

@@ -0,0 +1,489 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">John climbs 3 staircases.</span> <span id="fact2" class="fact2-color">The first staircase has 20 steps.</span> <span id="fact3" class="fact3-color">The next has twice as many steps as the first.</span> <span id="fact4" class="fact4-color">The final staircase has 10 fewer steps than the second one.</span> <span id="fact5" class="fact5-color">Each step is 0.5 feet.</span> How many feet did he climb?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Number of staircases: 3</span></li>
+                    <li><span class="fact2-color">First staircase steps: 20</span></li>
+                    <li><span class="fact3-color">Second staircase: 2 times first staircase</span></li>
+                    <li><span class="fact4-color">Third staircase: 10 fewer steps than second</span></li>
+                    <li><span class="fact5-color">Height per step: 0.5 feet</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many feet did John climb in total.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the number of steps in the second staircase</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">second_staircase</span> = <span class="fact2-color">20</span> * 2</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the number of steps in the third staircase</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">third_staircase</span> = <span class="var1-color">second_staircase</span> - 10</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the total number of steps</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_steps</span> = <span class="fact2-color">20</span> + <span class="var1-color">second_staircase</span> + <span class="var2-color">third_staircase</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the total height climbed in feet</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span>total_height = <span class="var3-color">total_steps</span> * <span class="fact5-color">0.5</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.currentStep++;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.second_staircase = 20 * 2;
+                        break;
+                    case 3:
+                        this.variables.third_staircase = this.variables.second_staircase - 10;
+                        break;
+                    case 5:
+                        this.variables.total_steps = 20 + this.variables.second_staircase + this.variables.third_staircase;
+                        break;
+                    case 7:
+                        this.variables.total_height = this.variables.total_steps * 0.5;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 0; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep === this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['second_staircase', 'third_staircase', 'total_steps', 'total_height'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'second_staircase': 'var1-color',
+                    'third_staircase': 'var2-color',
+                    'total_steps': 'var3-color',
+                    'total_height': 'fact5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_29.html

@@ -0,0 +1,492 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .fact6-color { background-color: rgba(76, 175, 80, 0.5); }
+        .fact7-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var1-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var4-color { background-color: rgba(63, 81, 181, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    Bethany loved riding horses. She rode <span id="fact1" class="fact1-color">1 hour</span> after school every <span id="fact2" class="fact2-color">Monday, Wednesday, and Friday</span>. On <span id="fact3" class="fact3-color">Tuesday and Thursday</span>, she rode for <span id="fact4" class="fact4-color">30 min</span> and on <span id="fact5" class="fact5-color">Saturdays</span>, she could ride for <span id="fact6" class="fact6-color">2 hours</span>. How many hours in total did she ride over a <span id="fact7" class="fact7-color">2 week</span> period?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Hours ridden on Monday, Wednesday, Friday: 1 hour each</span></li>
+                    <li><span class="fact2-color">Days ridden for 1 hour: Monday, Wednesday, Friday</span></li>
+                    <li><span class="fact3-color">Days ridden for 30 minutes: Tuesday, Thursday</span></li>
+                    <li><span class="fact4-color">Time ridden on Tuesday and Thursday: 30 minutes each</span></li>
+                    <li><span class="fact5-color">Day ridden for 2 hours: Saturday</span></li>
+                    <li><span class="fact6-color">Hours ridden on Saturday: 2 hours</span></li>
+                    <li><span class="fact7-color">Time period: 2 weeks</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>We need to calculate the total hours Bethany rode horses over a 2-week period.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate hours ridden on Monday, Wednesday, and Friday each week</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">hours_mon_wed_fri</span> = <span class="fact1-color">1</span> * 3</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate hours ridden on Tuesday and Thursday each week</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">hours_tue_thu</span> = <span class="fact4-color">30</span> * 2 / 60</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate total hours ridden per week</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">hours_per_week</span> = <span class="var1-color">hours_mon_wed_fri</span> + <span class="var2-color">hours_tue_thu</span> + <span class="fact6-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate total hours ridden over 2 weeks</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">total_hours</span> = <span class="var3-color">hours_per_week</span> * <span class="fact7-color">2</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.hours_mon_wed_fri = 1 * 3;
+                        break;
+                    case 3:
+                        this.variables.hours_tue_thu = 30 * 2 / 60;
+                        break;
+                    case 5:
+                        this.variables.hours_per_week = this.variables.hours_mon_wed_fri + this.variables.hours_tue_thu + 2;
+                        break;
+                    case 7:
+                        this.variables.total_hours = this.variables.hours_per_week * 2;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 0; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep <= -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep >= this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['hours_mon_wed_fri', 'hours_tue_thu', 'hours_per_week', 'total_hours'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'hours_mon_wed_fri': 'var1-color',
+                    'hours_tue_thu': 'var2-color',
+                    'hours_per_week': 'var3-color',
+                    'total_hours': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_3.html

@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    An airport has only <span id="fact1" class="fact1-color">2</span> planes that fly multiple times a day. Each day, the first plane goes to Greece for <span id="fact2" class="fact2-color">three-quarters</span> of its flights, and the remaining flights are split equally between flights to France and flights to Germany. The other plane flies exclusively to Poland, and its <span id="fact3" class="fact3-color">44</span> trips only amount to <span id="fact4" class="fact4-color">half</span> the number of trips the first plane makes throughout each day. How many flights to France does the first plane take in one day?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Number of planes: 2</span></li>
+                    <li><span class="fact2-color">Fraction of first plane's flights to Greece: 3/4</span></li>
+                    <li><span class="fact3-color">Second plane's trips to Poland: 44</span></li>
+                    <li><span class="fact4-color">Ratio of second plane's trips to first plane's trips: 1/2</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How many flights to France does the first plane take in one day?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the number of flights for the first plane</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">first_plane_flights</span> = <span class="fact3-color">44</span> * 2</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the fraction of flights to France and Germany</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">france_germany_fraction</span> = 1 - <span class="fact2-color">3/4</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the number of flights to France and Germany</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">france_germany_flights</span> = <span class="var1-color">first_plane_flights</span> * <span class="var2-color">france_germany_fraction</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the number of flights to France</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">france_flights</span> = <span class="var3-color">france_germany_flights</span> / 2</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.first_plane_flights = 44 * 2;
+                        break;
+                    case 3:
+                        this.variables.france_germany_fraction = 1 - 3/4;
+                        break;
+                    case 5:
+                        this.variables.france_germany_flights = this.variables.first_plane_flights * this.variables.france_germany_fraction;
+                        break;
+                    case 7:
+                        this.variables.france_flights = this.variables.france_germany_flights / 2;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['first_plane_flights', 'france_germany_fraction', 'france_germany_flights', 'france_flights'];
+                const colorClasses = ['var1-color', 'var2-color', 'var3-color', 'var4-color'];
+                
+                variableOrder.forEach((varName, index) => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = colorClasses[index];
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_30.html

@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .fact6-color { background-color: rgba(76, 175, 80, 0.5); }
+        .fact7-color { background-color: rgba(255, 87, 34, 0.5); }
+        .fact8-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var1-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var2-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var3-color { background-color: rgba(63, 81, 181, 0.5); }
+        .var4-color { background-color: rgba(0, 150, 136, 0.5); }
+        .var5-color { background-color: rgba(255, 152, 0, 0.5); }
+        .var6-color { background-color: rgba(33, 150, 243, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    Karl sells clothing in his store. <span id="fact1" class="fact1-color">He sells a T-shirt that costs $5</span>, <span id="fact2" class="fact2-color">some pants that cost $4</span>, and <span id="fact3" class="fact3-color">some skirts that cost $6</span>, <span id="fact4" class="fact4-color">he also sells some refurbished t-shirts that cost half the original price</span>. How much is his total income if he sold <span id="fact5" class="fact5-color">two T-shirts</span>, <span id="fact6" class="fact6-color">one pair of pants</span>, <span id="fact7" class="fact7-color">four skirts</span>, and <span id="fact8" class="fact8-color">six refurbished T-shirts</span>?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">T-shirt cost: $5</span></li>
+                    <li><span class="fact2-color">Pants cost: $4</span></li>
+                    <li><span class="fact3-color">Skirt cost: $6</span></li>
+                    <li><span class="fact4-color">Refurbished T-shirt cost: half of original price</span></li>
+                    <li><span class="fact5-color">Number of T-shirts sold: 2</span></li>
+                    <li><span class="fact6-color">Number of pants sold: 1</span></li>
+                    <li><span class="fact7-color">Number of skirts sold: 4</span></li>
+                    <li><span class="fact8-color">Number of refurbished T-shirts sold: 6</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>Calculate Karl's total income from all clothing items sold.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the cost of a refurbished T-shirt</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">refurbished_tshirt_cost</span> = <span class="fact1-color">5</span> / 2</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the income from refurbished T-shirts</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">refurbished_tshirt_income</span> = <span class="var1-color">refurbished_tshirt_cost</span> * <span class="fact8-color">6</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the income from T-shirts</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">tshirt_income</span> = <span class="fact1-color">5</span> * <span class="fact5-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the income from pants</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">pants_income</span> = <span class="fact2-color">4</span> * <span class="fact6-color">1</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate the income from skirts</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">skirt_income</span> = <span class="fact3-color">6</span> * <span class="fact7-color">4</span></span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate the total income</span>
+                    </div>
+                    <div class="code-line" data-step="11">
+                        <span class="line-number">12</span>
+                        <span><span class="var6-color">total_income</span> = <span class="var2-color">refurbished_tshirt_income</span> + <span class="var3-color">tshirt_income</span> + <span class="var4-color">pants_income</span> + <span class="var5-color">skirt_income</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 11;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.refurbished_tshirt_cost = 5 / 2;
+                        break;
+                    case 3:
+                        this.variables.refurbished_tshirt_income = this.variables.refurbished_tshirt_cost * 6;
+                        break;
+                    case 5:
+                        this.variables.tshirt_income = 5 * 2;
+                        break;
+                    case 7:
+                        this.variables.pants_income = 4 * 1;
+                        break;
+                    case 9:
+                        this.variables.skirt_income = 6 * 4;
+                        break;
+                    case 11:
+                        this.variables.total_income = this.variables.refurbished_tshirt_income + 
+                                                     this.variables.tshirt_income + 
+                                                     this.variables.pants_income + 
+                                                     this.variables.skirt_income;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7, 9, 11];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['refurbished_tshirt_cost', 'refurbished_tshirt_income', 'tshirt_income', 'pants_income', 'skirt_income', 'total_income'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('income') || varName.includes('cost') ? 
+                            `$${value.toFixed(2)}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'refurbished_tshirt_cost': 'var1-color',
+                    'refurbished_tshirt_income': 'var2-color',
+                    'tshirt_income': 'var3-color',
+                    'pants_income': 'var4-color',
+                    'skirt_income': 'var5-color',
+                    'total_income': 'var6-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_31.html

@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    Iris' family is planning a surprise birthday party for her. The party will include her <span id="fact1" class="fact1-color">3 uncles</span> and <span id="fact2" class="fact2-color">4 aunts</span> who have <span id="fact3" class="fact3-color">a son and daughter each</span> as well as her <span id="fact4" class="fact4-color">brother</span> and <span id="fact5" class="fact5-color">mother</span>. In total, how many people are coming to Iris' birthday party?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Number of uncles: 3</span></li>
+                    <li><span class="fact2-color">Number of aunts: 4</span></li>
+                    <li><span class="fact3-color">Each aunt and uncle has: 2 children (1 son and 1 daughter)</span></li>
+                    <li><span class="fact4-color">Iris has: 1 brother</span></li>
+                    <li><span class="fact5-color">Iris has: 1 mother</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>In total, how many people are coming to Iris' birthday party?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate people per family unit</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">people_per_family_unit</span> = 1 + 1 + 1</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate total aunts and uncles</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">total_aunts_uncles</span> = <span class="fact1-color">3</span> + <span class="fact2-color">4</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate total relatives from aunts, uncles, and cousins</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_relatives</span> = <span class="var2-color">total_aunts_uncles</span> * <span class="var1-color">people_per_family_unit</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate total people including mother and brother</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span>total_people = <span class="var3-color">total_relatives</span> + <span class="fact5-color">1</span> + <span class="fact4-color">1</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.people_per_family_unit = 1 + 1 + 1; // This is the wrong step
+                        break;
+                    case 3:
+                        this.variables.total_aunts_uncles = 3 + 4;
+                        break;
+                    case 5:
+                        this.variables.total_relatives = this.variables.total_aunts_uncles * this.variables.people_per_family_unit;
+                        break;
+                    case 7:
+                        this.variables.total_people = this.variables.total_relatives + 1 + 1;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['people_per_family_unit', 'total_aunts_uncles', 'total_relatives', 'total_people'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'people_per_family_unit': 'var1-color',
+                    'total_aunts_uncles': 'var2-color',
+                    'total_relatives': 'var3-color',
+                    'total_people': 'fact5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_32.html

@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Candy has a chair rental business. During the weekdays, 60 chairs are rented each day</span>; but <span id="fact2" class="fact2-color">during weekends, 100 chairs are rented each day</span>. If this continues, <span id="fact3" class="fact3-color">how many chairs in total will Candy be able to rent out in two 4-week months</span>?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Weekday rentals: 60 chairs per day</span></li>
+                    <li><span class="fact2-color">Weekend rentals: 100 chairs per day</span></li>
+                    <li><span class="fact3-color">Time period: two 4-week months</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>The total number of chairs Candy will rent out in two 4-week months.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate total chairs rented during weekdays in a week</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">weekday_rentals_per_week</span> = <span class="fact1-color">60</span> * 5</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate total chairs rented during weekends in a week</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">weekend_rentals_per_week</span> = <span class="fact2-color">100</span> * 2</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate total chairs rented in a week</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_rentals_per_week</span> = <span class="var1-color">weekday_rentals_per_week</span> + <span class="var2-color">weekend_rentals_per_week</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate total chairs rented in a month (4 weeks)</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">total_rentals_per_month</span> = <span class="var3-color">total_rentals_per_week</span> * 4</span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate total chairs rented in two months</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">total_rentals_two_months</span> = <span class="var4-color">total_rentals_per_month</span> * 2</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 9;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.weekday_rentals_per_week = 60 * 5;
+                        break;
+                    case 3:
+                        this.variables.weekend_rentals_per_week = 100 * 2;
+                        break;
+                    case 5:
+                        this.variables.total_rentals_per_week = this.variables.weekday_rentals_per_week + this.variables.weekend_rentals_per_week;
+                        break;
+                    case 7:
+                        this.variables.total_rentals_per_month = this.variables.total_rentals_per_week * 4;
+                        break;
+                    case 9:
+                        this.variables.total_rentals_two_months = this.variables.total_rentals_per_month * 2;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 0; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.remove('current');
+                    if (index === this.currentStep) {
+                        line.classList.add('current');
+                    }
+                });
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep <= -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep >= this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['weekday_rentals_per_week', 'weekend_rentals_per_week', 'total_rentals_per_week', 'total_rentals_per_month', 'total_rentals_two_months'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'weekday_rentals_per_week': 'var1-color',
+                    'weekend_rentals_per_week': 'var2-color',
+                    'total_rentals_per_week': 'var3-color',
+                    'total_rentals_per_month': 'var4-color',
+                    'total_rentals_two_months': 'var5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_33.html

@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Yoque borrowed money from her sister and promised to pay it back in 11 months</span> <span id="fact2" class="fact2-color">including an additional 10% of the money she borrowed</span>. <span id="fact3" class="fact3-color">If she pays $15 per month</span>, how much money did she borrow?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Repayment period: 11 months</span></li>
+                    <li><span class="fact2-color">Additional payment: 10%</span></li>
+                    <li><span class="fact3-color">Monthly payment: $15</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How much money did Yoque borrow from her sister?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate total payment over 11 months</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">total_payment</span> = <span class="fact3-color">15</span> * <span class="fact1-color">11</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the percentage of the borrowed amount</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">percentage</span> = 100 + <span class="fact2-color">10</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the value of 1%</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">one_percent</span> = <span class="var1-color">total_payment</span> / <span class="var2-color">percentage</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the borrowed amount</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">borrowed_amount</span> = <span class="var3-color">one_percent</span> * 100</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.total_payment = 15 * 11;
+                        break;
+                    case 3:
+                        this.variables.percentage = 100 + 10;
+                        break;
+                    case 5:
+                        this.variables.one_percent = this.variables.total_payment / this.variables.percentage;
+                        break;
+                    case 7:
+                        this.variables.borrowed_amount = this.variables.one_percent * 100;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['total_payment', 'percentage', 'one_percent', 'borrowed_amount'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('payment') || varName.includes('amount') || varName.includes('percent') ? 
+                            `$${value.toFixed(2)}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'total_payment': 'var1-color',
+                    'percentage': 'var2-color',
+                    'one_percent': 'var3-color',
+                    'borrowed_amount': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_34.html

@@ -0,0 +1,560 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .fact6-color { background-color: rgba(76, 175, 80, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(0, 188, 212, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Steve bought $25 worth of groceries.</span> He bought <span id="fact2" class="fact2-color">a gallon of milk for $3</span>, <span id="fact3" class="fact3-color">two boxes of cereal for $3.5 each</span>, <span id="fact4" class="fact4-color">4 bananas for $.25 each</span>, <span id="fact5" class="fact5-color">four apples that cost $.5 each</span> and a number of boxes of cookies. <span id="fact6" class="fact6-color">The cookies cost twice as much per box as the gallon of milk.</span> How many boxes of cookies did he get?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Total grocery cost: $25</span></li>
+                    <li><span class="fact2-color">Milk cost: $3</span></li>
+                    <li><span class="fact3-color">Cereal: 2 boxes at $3.5 each</span></li>
+                    <li><span class="fact4-color">Bananas: 4 at $0.25 each</span></li>
+                    <li><span class="fact5-color">Apples: 4 at $0.5 each</span></li>
+                    <li><span class="fact6-color">Cookie cost per box: 2 times milk cost</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many boxes of cookies did Steve get?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the total cost of cereal</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">cereal_cost</span> = <span class="fact3-color">2</span> * <span class="fact3-color">3.5</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the total cost of bananas</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">banana_cost</span> = <span class="fact4-color">4</span> * <span class="fact4-color">0.25</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the total cost of apples</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">apple_cost</span> = <span class="fact5-color">4</span> * <span class="fact5-color">0.5</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate the cost of everything but cookies</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">non_cookie_cost</span> = <span class="fact2-color">3</span> + <span class="var1-color">cereal_cost</span> + <span class="var2-color">banana_cost</span> + <span class="var3-color">apple_cost</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate the cost spent on cookies</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">cookie_cost</span> = <span class="fact1-color">25</span> - <span class="var4-color">non_cookie_cost</span></span>
+                    </div>
+                    <div class="code-line" data-step="10">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate the cost of each box of cookies</span>
+                    </div>
+                    <div class="code-line" data-step="11">
+                        <span class="line-number">12</span>
+                        <span><span class="fact6-color">cookie_box_cost</span> = <span class="fact2-color">3</span> * <span class="fact6-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="12">
+                        <span class="line-number">13</span>
+                        <span class="comment"># Calculate the number of cookie boxes</span>
+                    </div>
+                    <div class="code-line" data-step="13">
+                        <span class="line-number">14</span>
+                        <span>cookie_boxes = <span class="var5-color">cookie_cost</span> / <span class="fact6-color">cookie_box_cost</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 13;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.cereal_cost = 2 * 3.5;
+                        break;
+                    case 3:
+                        this.variables.banana_cost = 4 * 0.25;
+                        break;
+                    case 5:
+                        this.variables.apple_cost = 4 * 0.5;
+                        break;
+                    case 7:
+                        // This is the wrong step (step 4 in the unformatted information)
+                        this.variables.non_cookie_cost = 3 + this.variables.cereal_cost + this.variables.banana_cost + this.variables.apple_cost;
+                        break;
+                    case 9:
+                        this.variables.cookie_cost = 25 - this.variables.non_cookie_cost;
+                        break;
+                    case 11:
+                        this.variables.cookie_box_cost = 3 * 2;
+                        break;
+                    case 13:
+                        this.variables.cookie_boxes = this.variables.cookie_cost / this.variables.cookie_box_cost;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7, 9, 11, 13];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['cereal_cost', 'banana_cost', 'apple_cost', 'non_cookie_cost', 'cookie_cost', 'cookie_box_cost', 'cookie_boxes'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = typeof value === 'number' ? 
+                            (varName.includes('cost') ? `$${value.toFixed(2)}` : value) : 
+                            value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'cereal_cost': 'var1-color',
+                    'banana_cost': 'var2-color',
+                    'apple_cost': 'var3-color',
+                    'non_cookie_cost': 'var4-color',
+                    'cookie_cost': 'var5-color',
+                    'cookie_box_cost': 'fact6-color',
+                    'cookie_boxes': 'fact1-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_35.html

@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Martin went on an eight-hour business trip.</span> During the first half of the trip, he traveled at a speed of <span id="fact2" class="fact2-color">70 kilometers per hour</span> and during the second half at a speed of <span id="fact3" class="fact3-color">85 kilometers per hour</span>. How many kilometers did he travel during the journey?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Trip duration: 8 hours</span></li>
+                    <li><span class="fact2-color">First half speed: 70 kilometers per hour</span></li>
+                    <li><span class="fact3-color">Second half speed: 85 kilometers per hour</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>The total distance Martin traveled during his business trip.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate half of the trip duration</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">half_trip_duration</span> = <span class="fact1-color">8</span> * 0.5</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate distance traveled during first half</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">first_half_distance</span> = <span class="var1-color">half_trip_duration</span> * <span class="fact2-color">70</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate distance traveled during second half</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">second_half_distance</span> = <span class="var1-color">half_trip_duration</span> * <span class="fact3-color">85</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate total distance traveled</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">total_distance</span> = <span class="var2-color">first_half_distance</span> + <span class="var3-color">second_half_distance</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.half_trip_duration = 8 * 0.5;
+                        break;
+                    case 3:
+                        this.variables.first_half_distance = this.variables.half_trip_duration * 70;
+                        break;
+                    case 5:
+                        // Intentional error in step 3 (which is step 5 in our code)
+                        if (step === this.wrongStep) {
+                            this.variables.second_half_distance = this.variables.half_trip_duration * 85;
+                        } else {
+                            this.variables.second_half_distance = this.variables.half_trip_duration * 85;
+                        }
+                        break;
+                    case 7:
+                        this.variables.total_distance = this.variables.first_half_distance + this.variables.second_half_distance;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['half_trip_duration', 'first_half_distance', 'second_half_distance', 'total_distance'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'half_trip_duration': 'var1-color',
+                    'first_half_distance': 'var2-color',
+                    'second_half_distance': 'var3-color',
+                    'total_distance': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_36.html

@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .var6-color { background-color: rgba(76, 175, 80, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Jackson's mom promises $5 per hour spent on chores.</span>
+                    <span id="fact2" class="fact2-color">Jackson spends 2 hours vacuuming, and decides to do this twice.</span>
+                    <span id="fact3" class="fact3-color">He also spends 0.5 hours washing dishes.</span>
+                    <span id="fact4" class="fact4-color">He spends three times as long cleaning the bathroom as washing dishes.</span>
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Rate per hour: $5</span></li>
+                    <li><span class="fact2-color">Hours vacuuming (each time): 2</span></li>
+                    <li><span class="fact2-color">Number of times vacuuming: 2</span></li>
+                    <li><span class="fact3-color">Hours washing dishes: 0.5</span></li>
+                    <li><span class="fact4-color">Bathroom cleaning multiplier: 3</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>We need to calculate the total amount of money Jackson earned from all chores.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate total hours spent vacuuming</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">hours_vacuuming</span> = <span class="fact2-color">2</span> * <span class="fact2-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate money earned from vacuuming</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">vacuuming_money</span> = <span class="var1-color">hours_vacuuming</span> * <span class="fact1-color">5</span></span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate money earned from washing dishes</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">dishes_money</span> = <span class="fact3-color">0.5</span> * <span class="fact1-color">5</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate time spent cleaning the bathroom</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">bathroom_time</span> = <span class="fact3-color">0.5</span> * <span class="fact4-color">3</span></span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate money earned from cleaning the bathroom</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">bathroom_money</span> = <span class="var4-color">bathroom_time</span> * <span class="fact1-color">5</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">11</span>
+                        <span class="comment"># Calculate total money earned from all chores</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">12</span>
+                        <span><span class="var6-color">total_money</span> = <span class="var2-color">vacuuming_money</span> + <span class="var3-color">dishes_money</span> + <span class="var5-color">bathroom_money</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 6;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.nextStep();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.hours_vacuuming = 2 * 2;
+                        break;
+                    case 2:
+                        this.variables.vacuuming_money = this.variables.hours_vacuuming * 5;
+                        break;
+                    case 3:
+                        this.variables.dishes_money = 0.5 * 5;
+                        break;
+                    case 4:
+                        // This is the wrong step
+                        this.variables.bathroom_time = 0.5 * 3;
+                        break;
+                    case 5:
+                        this.variables.bathroom_money = this.variables.bathroom_time * 5;
+                        break;
+                    case 6:
+                        this.variables.total_money = this.variables.vacuuming_money + this.variables.dishes_money + this.variables.bathroom_money;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                const oldVariables = {...this.variables};
+                this.variables = {};
+                for (let i = 1; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach(line => {
+                    line.classList.remove('current');
+                });
+                
+                if (this.currentStep >= 0) {
+                    const currentLines = document.querySelectorAll(`.code-line[data-step="${this.currentStep}"]`);
+                    currentLines.forEach(line => {
+                        line.classList.add('current');
+                    });
+                }
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep === this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['hours_vacuuming', 'vacuuming_money', 'dishes_money', 'bathroom_time', 'bathroom_money', 'total_money'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('money') ? `$${value}` : value;
+                        
+                        let itemClass = "variable-item " + colorClass;
+                        if (this.currentStep === this.wrongStep && varName === 'bathroom_time') {
+                            itemClass += " error-highlight";
+                        }
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'hours_vacuuming': 'var1-color',
+                    'vacuuming_money': 'var2-color',
+                    'dishes_money': 'var3-color',
+                    'bathroom_time': 'var4-color',
+                    'bathroom_money': 'var5-color',
+                    'total_money': 'var6-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_37.html

@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Florida is starting a promotion where every car that arrives gets one orange per passenger.</span> A family of <span id="fact2" class="fact2-color">4</span> arrives and gets their oranges. They had planned to stop for a snack later where they would spend <span id="fact3" class="fact3-color">$15</span> in total, but now that they have the oranges they don't have to buy them at the stop. When they get to the stop they see that the oranges would've cost <span id="fact4" class="fact4-color">$1.5</span> each. What percentage of the money they planned to spend did they save instead?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Oranges per passenger: 1</span></li>
+                    <li><span class="fact2-color">Number of family members: 4</span></li>
+                    <li><span class="fact3-color">Planned spending: $15</span></li>
+                    <li><span class="fact4-color">Cost per orange: $1.5</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>The percentage of the money they planned to spend that they saved instead.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the total cost of oranges</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">total_orange_cost</span> = <span class="fact2-color">4</span> * <span class="fact4-color">1.5</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the proportion of their original spending plan</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">proportion_saved</span> = <span class="var1-color">total_orange_cost</span> / <span class="fact3-color">15</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Convert the proportion to a percentage</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">percentage_saved</span> = <span class="var2-color">proportion_saved</span> * 100</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.total_orange_cost = 4 * 1.5;
+                        break;
+                    case 3:
+                        // This is the wrong step as indicated in the wrongstep tag
+                        this.variables.proportion_saved = this.variables.total_orange_cost / 15;
+                        break;
+                    case 5:
+                        this.variables.percentage_saved = this.variables.proportion_saved * 100;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['total_orange_cost', 'proportion_saved', 'percentage_saved'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('percentage') ? `${value}%` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'total_orange_cost': 'var1-color',
+                    'proportion_saved': 'var2-color',
+                    'percentage_saved': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_38.html

@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        
+        .wrong-step {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    A cheetah can run at a top speed of <span id="fact1" class="fact1-color">60 mph</span>. The gazelle can run for speeds of up to <span id="fact2" class="fact2-color">40 miles per hour</span>. If <span id="fact3" class="fact3-color">one mile per hour is about 1.5 feet per second</span>, then how many seconds would it take for a cheetah traveling at top speed to catch up to a fleeing gazelle also running at top speed if the two animals were initially <span id="fact4" class="fact4-color">210 feet apart</span> and they both traveled in the same direction?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Cheetah speed: 60 mph</span></li>
+                    <li><span class="fact2-color">Gazelle speed: 40 mph</span></li>
+                    <li><span class="fact3-color">Conversion rate: 1.5 feet per second per mph</span></li>
+                    <li><span class="fact4-color">Initial distance: 210 feet</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>How many seconds it would take for the cheetah to catch up to the gazelle.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Convert cheetah speed from mph to feet per second</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">cheetah_speed_fps</span> = <span class="fact1-color">60</span> * <span class="fact3-color">1.5</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Convert gazelle speed from mph to feet per second</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">gazelle_speed_fps</span> = <span class="fact2-color">40</span> * <span class="fact3-color">1.5</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the relative speed between cheetah and gazelle</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">relative_speed</span> = <span class="var1-color">cheetah_speed_fps</span> - <span class="var2-color">gazelle_speed_fps</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate time needed for cheetah to catch gazelle</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">time_to_catch</span> = <span class="fact4-color">210</span> / <span class="var3-color">relative_speed</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.cheetah_speed_fps = 60 * 1.5;
+                        break;
+                    case 3:
+                        this.variables.gazelle_speed_fps = 40 * 1.5;
+                        break;
+                    case 5:
+                        this.variables.relative_speed = this.variables.cheetah_speed_fps - this.variables.gazelle_speed_fps;
+                        break;
+                    case 7:
+                        // Intentionally keeping the error as per the wrong step
+                        this.variables.time_to_catch = 210 / this.variables.relative_speed;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['cheetah_speed_fps', 'gazelle_speed_fps', 'relative_speed', 'time_to_catch'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'cheetah_speed_fps': 'var1-color',
+                    'gazelle_speed_fps': 'var2-color',
+                    'relative_speed': 'var3-color',
+                    'time_to_catch': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_39.html

@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var4-color { background-color: rgba(121, 85, 72, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    At football tryouts, the coach wanted to see who could throw the ball the farthest. <span id="fact1" class="fact1-color">Parker threw the ball 16 yards</span>. <span id="fact2" class="fact2-color">Grant threw the ball 25 percent farther than Parker</span> and <span id="fact3" class="fact3-color">Kyle threw the ball 2 times farther than Grant</span>. Compared to Parker, how much farther did Kyle throw the ball?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Parker's throw: 16 yards</span></li>
+                    <li><span class="fact2-color">Grant's throw: 25% farther than Parker</span></li>
+                    <li><span class="fact3-color">Kyle's throw: 2 times farther than Grant</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find:</h4>
+                    <p>Compared to Parker, how much farther did Kyle throw the ball?</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how much farther Grant threw compared to Parker</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">grant_extra</span> = <span class="fact1-color">16</span> * 0.25</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate Grant's total throw distance</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">grant_throw</span> = <span class="fact1-color">16</span> + <span class="var1-color">grant_extra</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate Kyle's throw distance</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">kyle_throw</span> = <span class="var2-color">grant_throw</span> * 2</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate how much farther Kyle threw compared to Parker</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">kyle_extra</span> = <span class="var3-color">kyle_throw</span> - <span class="fact1-color">16</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= 7) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.grant_extra = 16 * 0.25;
+                        break;
+                    case 3:
+                        this.variables.grant_throw = 16 + this.variables.grant_extra;
+                        break;
+                    case 5:
+                        this.variables.kyle_throw = this.variables.grant_throw * 2;
+                        break;
+                    case 7:
+                        this.variables.kyle_extra = this.variables.kyle_throw - 16;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['grant_extra', 'grant_throw', 'kyle_throw', 'kyle_extra'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'grant_extra': 'var1-color',
+                    'grant_throw': 'var2-color',
+                    'kyle_throw': 'var3-color',
+                    'kyle_extra': 'var4-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_4.html

@@ -0,0 +1,507 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Harry decided to buy some balloons for his friend's birthday party. One balloon costs $0.5</span>, and <span id="fact2" class="fact2-color">a pack of 10 balloons is cheaper and costs only $3</span>. Finally, <span id="fact3" class="fact3-color">Harry wants to bring to the party exactly 14 balloons</span>. How much did he need to pay for them?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Cost of one balloon: $0.5</span></li>
+                    <li><span class="fact2-color">Cost of a pack of 10 balloons: $3</span></li>
+                    <li><span class="fact3-color">Number of balloons needed: 14</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How much Harry needed to pay for the balloons.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how many separate balloons Harry needs to buy</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">separate_balloons</span> = <span class="fact3-color">14</span> - 10</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the cost of separate balloons</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">cost_of_separate_balloons</span> = <span class="var1-color">separate_balloons</span> * <span class="fact1-color">0.5</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the total cost</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_cost</span> = <span class="fact2-color">3</span> + <span class="var2-color">cost_of_separate_balloons</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                this.wrongStep = parseInt(document.querySelector('.wrong-step').textContent);
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.separate_balloons = 14 - 10;
+                        break;
+                    case 3:
+                        // This is the wrong step (step 2 in the unformatted information)
+                        if (this.wrongStep === 2) {
+                            this.variables.cost_of_separate_balloons = 4 * 0.5;
+                        } else {
+                            this.variables.cost_of_separate_balloons = this.variables.separate_balloons * 0.5;
+                        }
+                        break;
+                    case 5:
+                        this.variables.total_cost = 3 + this.variables.cost_of_separate_balloons;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['separate_balloons', 'cost_of_separate_balloons', 'total_cost'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('cost') ? `$${value}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'separate_balloons': 'var1-color',
+                    'cost_of_separate_balloons': 'var2-color',
+                    'total_cost': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_40.html

@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">John raises emu. He has 4 pens for emu</span> and <span id="fact2" class="fact2-color">each pen has 6 emus in it</span>. <span id="fact3" class="fact3-color">Each female emu lays 1 egg per day</span>. <span id="fact4" class="fact4-color">If half the emu are females</span> how many eggs does he get a week?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Number of pens: 4</span></li>
+                    <li><span class="fact2-color">Number of emus per pen: 6</span></li>
+                    <li><span class="fact3-color">Eggs per female emu per day: 1</span></li>
+                    <li><span class="fact4-color">Proportion of female emus: 1/2</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many eggs John gets in a week.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the total number of emus</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">total_emus</span> = <span class="fact2-color">6</span> * <span class="fact1-color">4</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the number of female emus</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">female_emus</span> = <span class="var1-color">total_emus</span> / <span class="fact4-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the total number of eggs in a week</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_eggs</span> = <span class="var2-color">female_emus</span> * <span class="fact3-color">7</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.total_emus = 6 * 4;
+                        break;
+                    case 3:
+                        this.variables.female_emus = this.variables.total_emus / 2;
+                        break;
+                    case 5:
+                        // This is the wrong step as indicated in the unformatted information
+                        // It should be female_emus * days_in_week, but we're using 7 directly
+                        this.variables.total_eggs = this.variables.female_emus * 7;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['total_emus', 'female_emus', 'total_eggs'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'total_emus': 'var1-color',
+                    'female_emus': 'var2-color',
+                    'total_eggs': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_41.html

@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    On a highway, <span id="fact1" class="fact1-color">the total number of vehicles passing is 300</span>. If <span id="fact2" class="fact2-color">the number of cars on the highway is twice the number of trucks</span>, find out the total number of trucks on the highway?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Total vehicles: 300</span></li>
+                    <li><span class="fact2-color">Cars = 2 × Trucks</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>Find out the total number of trucks on the highway.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># If we assume that the number of trucks on the highway is t</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">t</span> = 0  # Initial value for trucks</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># The total number of cars and trucks on the road is 2t+t= 300</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">cars</span> = 2 * <span class="var1-color">t</span>  # Number of cars is twice the number of trucks</span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># The number of vehicles on the road is 3t=300</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_vehicles</span> = <span class="var2-color">cars</span> + <span class="var1-color">t</span>  # Total vehicles is cars plus trucks</span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># The are t=300/3 trucks on the highway</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var1-color">t</span> = <span class="fact1-color">300</span> / 3  # Solving for t</span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># This means there are t=100 trucks on the road</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var1-color">t</span> = 100  # Final answer</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 9;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    if (this.currentStep < this.totalSteps) {
+                        this.currentStep++;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                if (this.currentStep < this.totalSteps) {
+                    this.currentStep++;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                if (this.currentStep > 0) {
+                    this.currentStep--;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep === 0) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.t = 0;
+                        break;
+                    case 3:
+                        this.variables.cars = 2 * this.variables.t;
+                        break;
+                    case 5:
+                        this.variables.total_vehicles = this.variables.cars + this.variables.t;
+                        break;
+                    case 7:
+                        this.variables.t = 300 / 3;
+                        break;
+                    case 9:
+                        this.variables.t = 100;
+                        break;
+                }
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                for (let i = 0; i <= this.currentStep; i++) {
+                    this.executeStep(i);
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.remove('current');
+                });
+                
+                if (this.currentStep >= 0 && this.currentStep <= this.totalSteps) {
+                    this.codeLines[this.currentStep].classList.add('current');
+                }
+
+                // Update button states
+                this.prevBtn.classList.toggle('disabled', this.currentStep <= -1);
+                this.nextBtn.classList.toggle('disabled', this.currentStep >= this.totalSteps);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['t', 'cars', 'total_vehicles'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    't': 'var1-color',
+                    'cars': 'var2-color',
+                    'total_vehicles': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_42.html

@@ -0,0 +1,511 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    At the same store, <span id="fact1" class="fact1-color">Peter bought 2 pairs of pants and 5 shirts for $62 total</span>, and <span id="fact2" class="fact2-color">Jessica bought 2 shirts for $20 total</span>. Each pair of pants cost the same price, and each shirt cost the same price. How much does 1 pair of pants cost?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Peter's purchase: 2 pairs of pants and 5 shirts for $62</span></li>
+                    <li><span class="fact2-color">Jessica's purchase: 2 shirts for $20</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>The cost of 1 pair of pants.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the cost per shirt from Jessica's purchase</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">cost_per_shirt</span> = <span class="fact2-color">20</span> / 2</span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Set up equation for Peter's purchase</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span>2 * <span class="var2-color">X</span> + 5 * <span class="var1-color">cost_per_shirt</span> = <span class="fact1-color">62</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Subtract the cost of shirts from both sides</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span>2 * <span class="var2-color">X</span> = <span class="fact1-color">62</span> - 5 * <span class="var1-color">cost_per_shirt</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Solve for X by dividing both sides by 2</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var2-color">X</span> = (62 - 5 * <span class="var1-color">cost_per_shirt</span>) / 2</span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 7;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.cost_per_shirt = 20 / 2;
+                        break;
+                    case 3:
+                        // This is where the equation is set up, no calculation yet
+                        this.variables.X = "unknown";
+                        break;
+                    case 5:
+                        // This is the wrong step according to the unformatted information
+                        // We'll implement it as given in the unformatted information
+                        this.variables.equation = "2X = $12";
+                        break;
+                    case 7:
+                        this.variables.X = 6;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['cost_per_shirt', 'X', 'equation'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'cost_per_shirt': 'var1-color',
+                    'X': 'var2-color',
+                    'equation': ''
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_43.html

@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .fact3-color { background-color: rgba(0, 123, 255, 0.5); }
+        .fact4-color { background-color: rgba(220, 53, 69, 0.5); }
+        .fact5-color { background-color: rgba(156, 39, 176, 0.5); }
+        .fact6-color { background-color: rgba(76, 175, 80, 0.5); }
+        .fact7-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var1-color { background-color: rgba(233, 30, 99, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(121, 85, 72, 0.5); }
+        .var4-color { background-color: rgba(0, 188, 212, 0.5); }
+        .var5-color { background-color: rgba(255, 152, 0, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    <span id="fact1" class="fact1-color">Sandra saved $10 for sweets</span>. <span id="fact2" class="fact2-color">Her mother gave her an additional $4</span>, and <span id="fact3" class="fact3-color">her father twice as much as her mother</span>. <span id="fact4" class="fact4-color">One candy costs $0.5</span>, and <span id="fact5" class="fact5-color">one jelly bean $0.2</span>. She wants to buy <span id="fact6" class="fact6-color">14 candies</span> and <span id="fact7" class="fact7-color">20 jelly beans</span>. How much money will she be left with after the purchase?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Sandra's savings: $10</span></li>
+                    <li><span class="fact2-color">Money from mother: $4</span></li>
+                    <li><span class="fact3-color">Money from father: 2 times mother's amount</span></li>
+                    <li><span class="fact4-color">Cost of one candy: $0.5</span></li>
+                    <li><span class="fact5-color">Cost of one jelly bean: $0.2</span></li>
+                    <li><span class="fact6-color">Number of candies to buy: 14</span></li>
+                    <li><span class="fact7-color">Number of jelly beans to buy: 20</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How much money Sandra will be left with after the purchase.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate how much money Sandra's father gave her</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">father_money</span> = <span class="fact2-color">4</span> * <span class="fact3-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate total money Sandra has</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">total_money</span> = <span class="var1-color">father_money</span> + <span class="fact2-color">4</span> + <span class="fact1-color">10</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate cost of candies</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">candy_cost</span> = <span class="fact6-color">14</span> * <span class="fact4-color">0.50</span></span>
+                    </div>
+                    <div class="code-line" data-step="6">
+                        <span class="line-number">7</span>
+                        <span class="comment"># Calculate cost of jelly beans</span>
+                    </div>
+                    <div class="code-line" data-step="7">
+                        <span class="line-number">8</span>
+                        <span><span class="var4-color">jellybean_cost</span> = <span class="fact7-color">20</span> * <span class="fact5-color">0.20</span></span>
+                    </div>
+                    <div class="code-line" data-step="8">
+                        <span class="line-number">9</span>
+                        <span class="comment"># Calculate money left after purchase</span>
+                    </div>
+                    <div class="code-line" data-step="9">
+                        <span class="line-number">10</span>
+                        <span><span class="var5-color">money_left</span> = <span class="var2-color">total_money</span> - <span class="var4-color">jellybean_cost</span> - <span class="var3-color">candy_cost</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 9;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.father_money = 4 * 2;
+                        break;
+                    case 3:
+                        this.variables.total_money = this.variables.father_money + 4 + 10;
+                        break;
+                    case 5:
+                        this.variables.candy_cost = 14 * 0.50;
+                        break;
+                    case 7:
+                        this.variables.jellybean_cost = 20 * 0.20;
+                        break;
+                    case 9:
+                        // This is the wrong step as indicated in the unformatted information
+                        this.variables.money_left = this.variables.total_money - this.variables.jellybean_cost - this.variables.candy_cost;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5, 7, 9];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['father_money', 'total_money', 'candy_cost', 'jellybean_cost', 'money_left'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = varName.includes('money') || varName.includes('cost') ? `$${value.toFixed(2)}` : value;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'father_money': 'var1-color',
+                    'total_money': 'var2-color',
+                    'candy_cost': 'var3-color',
+                    'jellybean_cost': 'var4-color',
+                    'money_left': 'var5-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>

evaluation/eval_interfaces/interactive_coding_explanations/interactive_code_right_CA_44.html

@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problem-Solving Interface</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: #f5f5f5;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            height: 800px;
+            border: 1px solid #ddd;
+            background-color: white;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel {
+            width: 40%;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #ddd;
+        }
+
+        .right-panel {
+            width: 60%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .problem-statement, .problem-understanding {
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        .problem-statement {
+            height: 50%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .problem-understanding {
+            height: 50%;
+        }
+
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            padding-bottom: 5px;
+            display: inline-block;
+        }
+
+        .debugger-controls {
+            display: flex;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            gap: 5px;
+        }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 15px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+
+        .btn:hover:not(.disabled) {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+
+        .btn-play-pause {
+            background-color: #2ecc71;
+            color: white;
+        }
+
+        .btn-stop {
+            background-color: #e74c3c;
+            color: white;
+        }
+
+        .btn-prev, .btn-next {
+            background-color: #3498db;
+            color: white;
+        }
+
+        .disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .python-solution {
+            height: 400px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            overflow: hidden;
+            background-color: #ffffff;
+            color: #333333;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .python-code {
+            padding: 15px;
+            height: calc(100% - 50px);
+            overflow-y: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        .code-line {
+            display: flex;
+            align-items: center;
+            padding: 4px 0;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .code-line.current {
+            background-color: #ffeb3b;
+            color: #000;
+            padding-left: 8px;
+        }
+
+        .line-number {
+            color: #888;
+            font-size: 12px;
+            min-width: 20px;
+            text-align: right;
+            margin-right: 15px;
+        }
+
+        .comment {
+            color: #347778;
+        }
+
+        .variables-display {
+            height: 300px;
+            border: 1px solid #ddd;
+            margin: 10px;
+            border-radius: 4px;
+            background-color: #f8f9fa;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .variable-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+            font-weight: 500;
+        }
+
+        .variable-name {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+
+        .variable-value {
+            font-weight: 600;
+        }
+
+        .fact1-color { background-color: rgba(255, 193, 7, 0.5); }
+        .fact2-color { background-color: rgba(40, 167, 69, 0.5); }
+        .var1-color { background-color: rgba(255, 87, 34, 0.5); }
+        .var2-color { background-color: rgba(96, 125, 139, 0.5); }
+        .var3-color { background-color: rgba(233, 30, 99, 0.5); }
+
+        ul {
+            padding-left: 20px;
+        }
+
+        li {
+            margin-bottom: 12px;
+        }
+
+        .what-to-find {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e8f4fd;
+            border-radius: 6px;
+            border-left: 4px solid #3498db;
+        }
+
+        .what-to-find h4 {
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+        .wrong-step {
+            display: none;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="wrong-step">0</div>
+    <div class="container">
+        <div class="left-panel">
+            <div class="problem-statement">
+                <div class="section-title">Problem Statement</div>
+                <p>
+                    Steve is building a bench for the playground and needs <span id="fact1" class="fact1-color">6 lengths of wood that measure 4 feet</span> and <span id="fact2" class="fact2-color">2 lengths of wood that measure 2 feet</span>. How many feet of wood does Steve need to buy?
+                </p>
+            </div>
+            <div class="problem-understanding">
+                <div class="section-title">Problem Summary</div>
+                <ul>
+                    <li><span class="fact1-color">Number of 4-foot wood lengths: 6</span></li>
+                    <li><span class="fact1-color">Length of each piece: 4 feet</span></li>
+                    <li><span class="fact2-color">Number of 2-foot wood lengths: 2</span></li>
+                    <li><span class="fact2-color">Length of each piece: 2 feet</span></li>
+                </ul>
+                <div class="what-to-find">
+                    <h4>What we need to find</h4>
+                    <p>How many total feet of wood Steve needs to buy.</p>
+                </div>
+            </div>
+        </div>
+        <div class="right-panel">
+            <div class="debugger-controls">
+                <button id="playPauseBtn" class="btn btn-play-pause">▶ Play</button>
+                <button id="stopBtn" class="btn btn-stop">■ Stop</button>
+                <button id="prevBtn" class="btn btn-prev">⤴ Previous Step</button>
+                <button id="nextBtn" class="btn btn-next">⤵ Next Step</button>
+            </div>
+            <div class="python-solution">
+                <div class="section-title" style="color: #333333; padding: 15px 15px 0; margin: 0;">Python Solution</div>
+                <div class="python-code" id="python-code">
+                    <div class="code-line" data-step="0">
+                        <span class="line-number">1</span>
+                        <span class="comment"># Calculate the total length of 4-foot wood pieces</span>
+                    </div>
+                    <div class="code-line" data-step="1">
+                        <span class="line-number">2</span>
+                        <span><span class="var1-color">four_foot_wood</span> = <span class="fact1-color">6</span> * <span class="fact1-color">4</span></span>
+                    </div>
+                    <div class="code-line" data-step="2">
+                        <span class="line-number">3</span>
+                        <span class="comment"># Calculate the total length of 2-foot wood pieces</span>
+                    </div>
+                    <div class="code-line" data-step="3">
+                        <span class="line-number">4</span>
+                        <span><span class="var2-color">two_foot_wood</span> = <span class="fact2-color">2</span> * <span class="fact2-color">2</span></span>
+                    </div>
+                    <div class="code-line" data-step="4">
+                        <span class="line-number">5</span>
+                        <span class="comment"># Calculate the total length of wood needed</span>
+                    </div>
+                    <div class="code-line" data-step="5">
+                        <span class="line-number">6</span>
+                        <span><span class="var3-color">total_wood</span> = <span class="var1-color">four_foot_wood</span> + <span class="var2-color">two_foot_wood</span></span>
+                    </div>
+                </div>
+            </div>
+            <div class="variables-display" id="variables-display">
+                <div class="section-title" style="margin-bottom: 15px;">Variables</div>
+                <div id="variables-list">
+                    <div class="variable-item">
+                        <span class="variable-name">No variables initialized yet</span>
+                        <span class="variable-value">Run the code to see variables</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class PythonDebugger {
+            constructor() {
+                this.currentStep = -1;
+                this.isPlaying = false;
+                this.playInterval = null;
+                this.totalSteps = 5;
+                this.variables = {};
+                
+                this.initializeElements();
+                this.bindEvents();
+                this.updateUI();
+            }
+
+            initializeElements() {
+                this.playPauseBtn = document.getElementById('playPauseBtn');
+                this.stopBtn = document.getElementById('stopBtn');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
+                this.codeLines = document.querySelectorAll('.code-line');
+                this.variablesDisplay = document.getElementById('variables-list');
+            }
+
+            bindEvents() {
+                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
+                this.stopBtn.addEventListener('click', () => this.stop());
+                this.prevBtn.addEventListener('click', () => this.previousStep());
+                this.nextBtn.addEventListener('click', () => this.nextStep());
+            }
+
+            togglePlay() {
+                if (this.isPlaying) {
+                    this.pause();
+                } else {
+                    this.play();
+                }
+            }
+
+            play() {
+                this.isPlaying = true;
+                this.playPauseBtn.innerHTML = '❚❚ Pause';
+                
+                if (this.currentStep >= this.totalSteps) {
+                    this.currentStep = -1;
+                }
+                
+                this.playInterval = setInterval(() => {
+                    const nextStep = this.getNextExecutableStep(this.currentStep);
+                    if (nextStep !== null) {
+                        this.currentStep = nextStep;
+                        this.executeStep(this.currentStep);
+                        this.updateUI();
+                    } else {
+                        this.pause();
+                    }
+                }, 1500);
+            }
+
+            pause() {
+                this.isPlaying = false;
+                this.playPauseBtn.innerHTML = '▶ Play';
+                if (this.playInterval) {
+                    clearInterval(this.playInterval);
+                    this.playInterval = null;
+                }
+            }
+
+            stop() {
+                this.pause();
+                this.currentStep = -1;
+                this.variables = {};
+                this.updateUI();
+            }
+
+            nextStep() {
+                const nextStep = this.getNextExecutableStep(this.currentStep);
+                if (nextStep !== null) {
+                    this.currentStep = nextStep;
+                    this.executeStep(this.currentStep);
+                    this.updateUI();
+                }
+            }
+
+            previousStep() {
+                const prevStep = this.getPreviousExecutableStep(this.currentStep);
+                if (prevStep !== null) {
+                    this.currentStep = prevStep;
+                    this.recalculateVariables();
+                    this.updateUI();
+                } else if (this.currentStep !== -1) {
+                    this.currentStep = -1;
+                    this.variables = {};
+                    this.updateUI();
+                }
+            }
+            
+            executeStep(step) {
+                switch(step) {
+                    case 1:
+                        this.variables.four_foot_wood = 6 * 4;
+                        break;
+                    case 3:
+                        // This is the wrong step as indicated in the unformatted information
+                        this.variables.two_foot_wood = 2 * 2;
+                        break;
+                    case 5:
+                        this.variables.total_wood = this.variables.four_foot_wood + this.variables.two_foot_wood;
+                        break;
+                }
+            }
+            
+            getExecutableSteps() {
+                // Returns only the steps that execute actual code (not comments)
+                return [1, 3, 5];
+            }
+
+            getNextExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex < executableSteps.length - 1 ? executableSteps[currentIndex + 1] : null;
+            }
+
+            getPreviousExecutableStep(currentStep) {
+                const executableSteps = this.getExecutableSteps();
+                const currentIndex = executableSteps.indexOf(currentStep);
+                return currentIndex > 0 ? executableSteps[currentIndex - 1] : null;
+            }
+
+            recalculateVariables() {
+                this.variables = {};
+                const executableSteps = this.getExecutableSteps();
+                for (let step of executableSteps) {
+                    if (step <= this.currentStep) {
+                        this.executeStep(step);
+                    }
+                }
+            }
+
+            updateUI() {
+                // Update code highlighting
+                this.codeLines.forEach((line, index) => {
+                    line.classList.toggle('current', index === this.currentStep);
+                });
+
+                // Update button states
+                const executableSteps = this.getExecutableSteps();
+                const isFirstStep = this.currentStep === -1;
+                const isLastStep = this.currentStep === executableSteps[executableSteps.length - 1];
+                
+                this.prevBtn.classList.toggle('disabled', this.currentStep === -1);
+                this.nextBtn.classList.toggle('disabled', isLastStep);
+
+                // Update variables display
+                this.updateVariablesDisplay();
+            }
+
+            updateVariablesDisplay() {
+                if (Object.keys(this.variables).length === 0) {
+                    this.variablesDisplay.innerHTML = `
+                        <div class="variable-item">
+                            <span class="variable-name">No variables initialized yet</span>
+                            <span class="variable-value">Run the code to see variables</span>
+                        </div>
+                    `;
+                    return;
+                }
+
+                let html = '';
+                const variableOrder = ['four_foot_wood', 'two_foot_wood', 'total_wood'];
+                
+                variableOrder.forEach(varName => {
+                    if (this.variables.hasOwnProperty(varName)) {
+                        const value = this.variables[varName];
+                        const colorClass = this.getVariableColorClass(varName);
+                        const displayValue = `${value} feet`;
+                        
+                        const lastVarName = variableOrder[variableOrder.length - 1];
+if(varName === lastVarName){
+    varName = varName + " (Final Answer)";
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+} else {
+    html += `<div class="variable-item ${colorClass}">
+        <span class="variable-name">${varName}</span>
+        <span class="variable-value">${value}</span>
+    </div>`;
+}
+                    }
+                });
+
+                this.variablesDisplay.innerHTML = html;
+            }
+            
+            getVariableColorClass(varName) {
+                const colorMap = {
+                    'four_foot_wood': 'var1-color',
+                    'two_foot_wood': 'var2-color',
+                    'total_wood': 'var3-color'
+                };
+                return colorMap[varName] || '';
+            }
+        }
+
+        // Initialize the debugger when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new PythonDebugger();
+        });
+    </script>
+</body>
+</html>