🤖 Cannot save fiddle

[mannycarz]

Error code

ERRW:1.0:K1.0:AS

Were you logged in?

Yes

Your username (if logged in)

mannycarz

Your HTML

<div class="quiz-card">
  <div class="brand-header">
    <h1 class="brand-title">House of Berrong</h1>
    <p class="brand-intro">
      Welcome to your tailored wellness journey. At House of Berrong, we believe in supporting your body’s natural supply so you can fully break down meals, avoid discomfort, and experience an overall lightness.
    </p>
    <hr class="header-divider">
  </div>

  <div class="progress-bar">
    <div class="progress-fill" id="fill"></div>
  </div>

  <div id="quiz-content">
    <div class="ai-badge">2026 AI Wellness Engine</div>
    <h2 id="question-text">Initializing Bio-Metric Scan...</h2>
    <div id="options-container"></div>
  </div>

  <div id="result-content" class="result-screen">
    <div class="ai-badge">Protocol Generated</div>
    <h2 id="result-title"></h2>
    <p id="result-desc"></p>
    <div class="ai-insight-box" id="ai-insight"></div>
    
    <div id="product-recommendation"></div>

    <p class="science-note">Based on digestive enzyme research and cardiovascular omega-3 meta-analysis.</p>
    <button onclick="location.reload()" class="reset-btn">Retake Quiz</button>
  </div>
</div>

Your JavaScript

const questions = [{
    q: "What is your primary wellness objective?",
    options: [
      { text: "Optimizing Digestion & Energy", points: { gut: 5 } },
      { text: "Heart Health & Systemic Vitality", points: { heart: 5 } },
      { text: "Internal Detox & Colon Cleansing", points: { detox: 5 } },
      { text: "Immune Support & Gut Clarity", points: { immune: 5 } }
    ]
  },
  {
    q: "Identify your most frequent physical symptom:",
    options: [
      { text: "Bloating or heaviness after meals", points: { gut: 5 } },
      { text: "Mental fog or sluggish circulation", points: { heart: 3, gut: 2 } },
      { text: "Irregularity or digestive stagnation", points: { detox: 5 } },
      { text: "General fatigue or skin dullness", points: { immune: 4, gut: 1 } }
    ]
  }
];

let currentStep = 0;
let scores = { gut: 0, heart: 0, detox: 0, immune: 0 };

function renderQuestion() {
  const q = questions[currentStep];
  document.getElementById('question-text').innerText = q.q;
  const container = document.getElementById('options-container');
  container.innerHTML = '';

  q.options.forEach(opt => {
    const btn = document.createElement('button');
    btn.className = 'option-btn';
    btn.innerText = opt.text;
    btn.onclick = () => handleSelect(opt.points);
    container.appendChild(btn);
  });

  document.getElementById('fill').style.width = ((currentStep / questions.length) * 100) + '%';
}

function handleSelect(points) {
  for (let key in points) { scores[key] += points[key]; }
  currentStep++;
  if (currentStep < questions.length) {
    renderQuestion();
  } else {
    showResults();
  }
}

function showResults() {
  document.getElementById('quiz-content').style.display = 'none';
  const resultScreen = document.getElementById('result-content');
  resultScreen.style.display = 'block';
  document.getElementById('fill').style.width = '100%';

  const winner = Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);

  const products = {
    gut: {
      title: "Bellyé | Gut Health",
      desc: "Your profile indicates a need for digestive enzyme reinforcement.",
      insight: "Bellyé reinforces your natural enzyme supply so you can fully break down meals and avoid incomplete digestion.",
      url: "https://houseofberrong.com/products/belley-gut-health"
    },
    heart: {
      title: "Salmon Élite | Heart Health",
      desc: "Focus on cardiovascular resilience and omega-3 balance.",
      insight: "Salmon Élite supports heart health, energy, and mood, serving as a non-negotiable daily ritual for systemic vitality.",
      url: "https://houseofberrong.com/products/salmon-elite-heart-health"
    },
    detox: {
      title: "FreshStart | Colon Health",
      desc: "Your system requires a reset of the internal pathways.",
      insight: "FreshStart helps clear digestive stagnation to restore internal lightness and metabolic efficiency.",
      url: "https://houseofberrong.com/products/freshstart-colon-health"
    },
    immune: {
      title: "ParasiteClear | Detox",
      desc: "Targeted internal cleansing for immune system clarity.",
      insight: "This protocol focuses on eliminating microbial interference, allowing your immune system to function at peak efficiency.",
      url: "https://houseofberrong.com/products/parasiteclear-detox"
    }
  };

  const selected = products[winner];
  document.getElementById('result-title').innerText = selected.title;
  document.getElementById('result-desc').innerText = selected.desc;
  document.getElementById('ai-insight').innerHTML = `<strong>AI Insight:</strong> ${selected.insight}`;
  
  const productContainer = document.getElementById('product-recommendation');
  productContainer.innerHTML = `<a href="${selected.url}" class="shop-now" target="_blank">Order Your ${selected.title.split('|')[0]} Protocol</a>`;
}

renderQuestion();

Your CSS

:root {
  --gold: #c5a059;
  --dark: #111;
  --gray: #f9f9f9;
}

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #333;
  margin: 0;
  padding: 20px;
}

.quiz-card {
  max-width: 550px;
  margin: 30px auto;
  border: 1px solid #eee;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.brand-title {
  font-size: 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 10px 0 15px 0;
  color: var(--dark);
}

.brand-intro {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 25px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.header-divider {
  border: 0;
  height: 1px;
  background: #eee;
  margin-bottom: 30px;
}

.progress-bar {
  height: 4px;
  width: 100%;
  background: #eee;
  margin-bottom: 30px;
}

.progress-fill {
  height: 100%;
  background: var(--gold);
  width: 0%;
  transition: 0.5s;
}

h2 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

.option-btn {
  width: 100%;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 15px;
}

.option-btn:hover {
  border-color: var(--gold);
  background: var(--gray);
}

.result-screen {
  display: none;
}

.ai-badge {
  font-size: 10px;
  background: #000;
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  margin-bottom: 15px;
  display: inline-block;
}

.ai-insight-box {
  text-align: left;
  background: #f9f9f9;
  padding: 15px;
  font-size: 13px;
  margin-bottom: 20px;
}

.shop-now {
  display: block;
  background: var(--gold);
  color: white;
  padding: 18px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
  text-transform: uppercase;
  font-size: 13px;
}

.reset-btn {
  background: none;
  border: none;
  color: #ccc;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 15px;
}