Inability to display questions (Javascript)

1

I can say that everything works fine with localStorage flash card application via Leitner System, but sometimes questions are not refreshed. The questions cannot be displayed but are written to localStorage. the front side of the card (gray background) is blank

Where am I making a mistake?

on JSFiddle


    updateFooter();
  });
  $('.wrong').on('click', function() {
    $('.question').show();
    $('.answer').hide();
    if (!start) {
      start = true;
      changeQuestion();
      return;
    }
    ouicards.wrong();
    changeQuestion();
    updateFooter();
  });
  $(document).keyup(function(e) {
    if (e.which === 37) {
      $('.question').show();
      $('.answer').hide();
      if (!start) {
        console.log(start);
        start = true;
        changeQuestion();
        return;
      }
      ouicards.correct();
      changeQuestion();
      updateFooter();
    } else if (e.which === 39) {
      $('.question').show();
      $('.answer').hide();
      if (!start) {
        start = true;
        changeQuestion();
        return;
      }
      ouicards.wrong();
      changeQuestion();
      updateFooter();
    } else if (e.which === 38) {
      $('.question').show();
      $('.answer').hide();
    } else if (e.which === 40) {
      $('.answer').show();
      $('.answer p').show();
      $('.question').hide();
    } else if (e.which === 32) {
      $('.flashCardStart').hide();
      $('.controls').show();
      if (!start) {
        start = true;
        changeQuestion();
        return;
      }
      ouicards.wrong();
      changeQuestion();
      updateFooter();
    }
  });

  function changeQuestion() {
    var newQuestion = ouicards.next();
    if (newQuestion === undefined) {
      console.log('Trying to load an undefined question into the DOM.');
      return;
    }
    $('.question').html(newQuestion.question);
    $('.answer').html(newQuestion.answer);
    $('.answer').children().hide();
  }

  $('.question').on('click', function() {
    $('.question').hide();
    $('.answer').show();
    $('.answer p').show();
  });
  $('.answer').on('click', function() {
    $('.answer').hide();
    $('.answer p').hide();
    $('.question').show();
    $('.question p').show();
  });

  function updateFooter() {
    $('.questions-count').html(ouicards.flashcards.length + ' questions');
    $('#stat-details').text(ouicards.bucketA.length + ' - ' +
      ouicards.bucketB.length + ' - ' +
      ouicards.bucketC.length);
  }
}

.flashCardsHeader {
  background-color: #313131;
  padding: 7px;
  color: #e1e1e1
}

.flashCardsHeader span {
  float: right;
}

.flashCardsHeader>div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  font-size: .8em;

}

.correct,
.wrong {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.controls div {
  width: 50%;
  text-align: center;
  padding: 25px 0;
  cursor: pointer;
  display: inline-block;
}

.controls label {
  font-size: 3em;
  cursor: pointer;
}

.correct {
  background-color: #00b52a;
  float: left;
  -webkit-box-shadow: inset 0 0 30px #036600;
  -moz-box-shadow: inset 0 0 30px #036600;
  box-shadow: inset 0 0 30px #036600;
}

.wrong {
  background-color: #bb1c04;
  -webkit-box-shadow: inset 0 0 30px #820101;
  -moz-box-shadow: inset 0 0 30px #820101;
  box-shadow: inset 0 0 30px #820101;
}

.memberNameSurname {
  color: whitesmoke;
}

.question,
.answer {
  padding: 8px 11px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.question p,
.answer p {
  margin: 0;
  padding-bottom: 15px;
}

.answer p a {
  color: #fbfbfb;
}

.question {
  background-color: #ECECEC;
  min-height: 120px;
  font-size: 1.3em;
  text-align: center;
  vertical-align: middle;
  padding: 40px 20px 0 20px;
  margin: 0px;
  height: 260px;
  min-height: 260px;
  vertical-align: middle;
  position: relative;
  -webkit-box-shadow: inset 0 0 30px #b7b7b7;
  -moz-box-shadow: inset 0 0 30px #b7b7b7;
  box-shadow: inset 0 0 30px #b7b7b7;
}

.answer {
  background-color: #0b388f;
  min-height: 300px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  padding: 40px 20px 0 20px;
  margin: 0px;
  font-size: 1em;
  height: 260px;
  min-height: 260px;
  vertical-align: middle;
  position: relative;
  overflow: auto;
  -webkit-box-shadow: inset 0 0 30px #081457;
  -moz-box-shadow: inset 0 0 30px #081457;
  box-shadow: inset 0 0 30px #081457;
}

.flashCardsFooter>div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  font-size: .8em;
  padding: 6px;
}

.stats {
  background-color: #191b1e;
  width: 100%;
}

.questions-count {
  display: inline-block;
}

.current-stats {
  float: right;
  color: #e1e1e8;
  margin-right: 20px;
}

.icon-stats {
  margin-right: 10px;
}

.flashCardStart {
  background: #0a378e;
  padding: 10px;
  height: 51px;
  text-align: center !important;
  -webkit-box-shadow: inset 0 0 30px #2f2c7e;
  -moz-box-shadow: inset 0 0 30px #2f2c7e;
  box-shadow: inset 0 0 30px #2f2c7e;
}

<div class="flashCardsHeader">



  <div class="question"> </div>
  <div class="answer"> </div>
  <div class="controls">

    <div class="correct">
      <label class="mdi mdi-thumb-up text-white">Correct</label>
    </div>
    <div class="wrong">
      <label class="mdi mdi-thumb-down text-white">Wrong</label>
    </div>
  </div>

  <div class="flashCardsFooter">
    <div class="stats">
      <div class="questions-count">0 questions - time to load some!</div>
      <div class="current-stats">
        <label class="icon-stats"></label>
        <label id="stat-details">0 - 0 - 0</label>
      </div>
    </div>
  </div>
</div>