JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

<script src="https://cdn.tailwindcss.com?plugins=forms"></script>

<div class="space-y-8 p-8" x-data="{
  total: 20,
  answered: 16,
  correct: 11,
  weight: 0.5,
  get questionsAnsweredWeight() {
    return Math.round((1 - this.weight) * 100) / 100
  },
  get correctAnswersWeight() {
    return Math.round(this.weight * 100) / 100
  },
  get score() {
    return Math.round((((this.answered / this.total) * this.questionsAnsweredWeight) + ((this.correct / this.answered) * this.correctAnswersWeight)) * 100)
  },
}">
  <div class="flex items-center gap-2">
    <span class="w-48">Total questions</span>
    <input type="number" x-model="total">
  </div>
  <div class="flex items-center gap-2">
    <span class="w-48">Questions answered</span>
    <input type="number" x-model="answered" :max="total">
  </div>
  <div class="flex items-center gap-2">
    <span class="w-48">Correct answers</span>
    <input type="number" x-model="correct" :max="answered">
  </div>
  <div class="flex items-center gap-2">
    <strong>Weight:</strong>
    <div>Questions answered (<span x-text="questionsAnsweredWeight"></span>)</div>
    <input type="range" min="0.1" max="0.9" step="0.1" x-model="weight">
    <div>Correct answers (<span x-text="correctAnswersWeight"></span>)</div>
  </div>
  <div>Score: <span x-text="score"></span></div>
</div>