Product-Market Fit Quiz

<link rel="stylesheet" href="path/to/diagnostic-quiz-assessment/styles.css">
<link rel="stylesheet" href="path/to/product-market-fit-quiz/styles.css">

<!-- Container populated by the vanilla JS script -->
<section class="dqa" id="pmf-quiz"></section>

<script>
(function () {
  var container = document.getElementById('pmf-quiz');
  var productName = 'our product';

  var questions = [
    {
      id: 'disappointment',
      text: 'How would you feel if you could no longer use ' + productName + '?',
      type: 'single-select',
      options: [
        { value: 'very', label: 'Very disappointed', score: 3 },
        { value: 'somewhat', label: 'Somewhat disappointed', score: 1 },
        { value: 'not', label: 'Not disappointed', score: 0 },
        { value: 'na', label: 'Not applicable / I no longer use it', score: 0 },
      ],
    },
    {
      id: 'usage-frequency',
      text: 'How often do you use ' + productName + '?',
      type: 'single-select',
      options: [
        { value: 'daily', label: 'Daily' },
        { value: 'weekly', label: 'Weekly' },
        { value: 'monthly', label: 'Monthly' },
        { value: 'less', label: 'Less often' },
      ],
    },
    {
      id: 'main-benefit',
      text: 'What is the main benefit you receive from ' + productName + '?',
      type: 'text',
      required: false,
    },
  ];

  var resultTiers = [
    { minScore: 3, maxScore: 99, title: 'Strong PMF',
      description: 'Focus on growth and retention.' },
    { minScore: 1, maxScore: 2, title: 'Emerging PMF',
      description: 'Iterate on what your most-disappointed users value.' },
    { minScore: 0, maxScore: 0, title: 'No PMF yet',
      description: 'Consider repositioning or talking to more users.' },
  ];

  // See html/index.html for the full self-contained implementation.
}());
</script>