JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main"></div>

CSS

.square {
  width: 100px;
  height: 100px;
  display: inline-block
}

.bad {
  background: #b66;
}

.good {
  background: #6b6;
}

JavaScript

function newQuestion(question) {
  return `<form>
    <div>${question}</div>
    <div class="inputs">
      <input id="bad" type="radio" name="vote" value="-1" />
      <label for="bad" class="square bad"></label>
      <input id="good" type="radio" name="vote" value="+1" />
      <label for="good" class="square good"></label>
    </div>
  </form>`
}

const questions = [
  'Do you like sprouts?',
  'Do you like the color blue?',
  'Do you like candles?',
  'Do you like the ocean?'
];

const answers = [];

const main = document.querySelector('#main');
let index = 0;

function addAnswer(e) {
  const id = e.target.id;
  switch (id) {
    case 'good':
      answers.push(1);
      break;
    case 'bad':
      answers.push(-1);
      break;
  }
  showQuestion(++index);
}

function showQuestion(index) {
  if (index < questions.length) {
    main.innerHTML = newQuestion(questions[index]);
    main.querySelector('.inputs').addEventListener('click', addAnswer, false);
  }
  console.log(answers);
}

showQuestion(index);