JS練習用にて３択アプリ作成中

前提・実現したいこと

JSにて３択アプリを順番に押す時間制限付きのアプリに改変したい
下記のソースコードを
A、B、Cをランダム配置で表示して順に押していくゲームにしたいです。
時間制限付きで１０回連続で、YouTubeへ転移する。１回でもミスするとやり直し。

分からない点

1.下記のアプリは、正解を配列先頭に固定して正誤判定しています。（子要素をランダムにしないためスプレッド演算子も使用）
これをランダムに並んだA-B-C表示から順にA-B-Cを押すと正解として、
間違えた時点で次の問題へ、とする場合には、
正解判定の専用の配列を用意し、ifにて３回判断するで良いでしょうか。

2.時間経過にて表示転移する機能実装したいです。
ex)例えば３s経つと、不正解判定になり、次のランダム表示をする。
この場合どういった関数とアルゴリズムが考えられますか？

3. 
``
//配列表示関数（）
　//ランダム関数（）で回す
  
// 順番に押したか確認する関数
  // YES＝＞次の問題表示正解カウンタ＋＋
  // No＝＞間違えた瞬間スキップして次の問題へ

//whileにてfirstchild削除
// 配列表示関数（）
　//ランダム関数（）で回す

〜上記を１０回

// 最終的に連続正解したか確認する（１０回連続）
  // YES＝＞動画へ飛ばす
  // No＝＞リプレイ
``

この流れで良いでしょうか？

4.CSSですが、li要素の下の間隔を少し空けたいですがうまく反映されません。

該当のソースコード

JS
1'use strict';
2
3{
4  const question = document.getElementById('question');
5  const btn = document.getElementById('btn');
6  const choices = document.getElementById('choices');
7  const result = document.getElementById('result');
8  const scoreLabel = document.querySelector('#result > p');
9
10  const quizSet = [
11    { q: '世界で一番大きな湖は？', c: ['カスピ海', 'カリブ海', '琵琶湖'] },
12    { q: '2の8乗は？', c: ['256', '64', '1024'] },
13    { q: 'いま、何問目？', c: ['3問目', '4問目', '5問目'] },
14  ];
15  let currentNum = 0;
16  let isAnswered;
17  let score = 0;
18
19  function shuffle(arr) {
20    for (let i = arr.length - 1; i > 0; i--) {
21      const j = Math.floor(Math.random() * (i + 1));
22      [arr[j], arr[i]] = [arr[i], arr[j]];
23    }
24    return arr;
25  }
26
27  function checkAnswer(li) {
28    if (isAnswered) {
29      return;
30    }
31    isAnswered = true;
32
33    if (li.textContent === quizSet[currentNum].c[0]) {
34      li.classList.add('correct');
35      score++;
36    } else {
37      li.classList.add('wrong');
38    }
39
40    btn.classList.remove('disabled');
41  }
42
43
44  function setQuiz() {
45    isAnswered = false;
46
47    question.textContent = quizSet[currentNum].q;
48
49    while (choices.firstChild) {
50      choices.removeChild(choices.firstChild);
51    }
52
53    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
54    shuffledChoices.forEach(choice => {
55      const li = document.createElement('li');
56      li.textContent = choice;
57      li.addEventListener('click', () => {
58        checkAnswer(li);
59      });
60      choices.appendChild(li);
61    });
62
63    if (currentNum === quizSet.length - 1) {
64      btn.textContent = 'Show Score';
65    }
66  }
67
68  setQuiz();
69
70  btn.addEventListener('click', () => {
71    if (btn.classList.contains('disabled')) {
72      return;
73    }
74    btn.classList.add('disabled');
75
76    if (currentNum === quizSet.length - 1) {
77      // console.log(`Score: ${score} / ${quizSet.length}`);
78      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
79      result.classList.add('show');
80    } else {
81      currentNum++;
82      setQuiz();
83    }
84  });
85}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Quiz</title>
6  <link rel="stylesheet" href="../portfolio_saga/css/style.css">
7</head>
8<body>
9  <div class="container">
10    <p id="question"></p>
11    <ul id="choices"></ul>
12    <div id="btn" class="disabled">Next</div>
13
14    <section id="result">
15      <p>Score: 3 / 3</p>
16      <a href="">Replay?</a>
17    </section>
18  </div>
19
20  <script src="../portfolio_saga/main.js"></script>
21
22</body>
23</html>

CSS
1body {
2  background: #efdec1;
3  font-size: 30px;
4  font-family: Verdana, sans-serif;
5}
6
7.container {
8  width: 700px;
9  height: 650px;
10  margin: 8px auto;
11  background: #fff;
12  border-radius: 4px;
13  padding: 16px;
14  position: relative;
15}
16
17#question {
18  margin-bottom: 16px;
19  font-weight: bold;
20  /* margin: auto; */
21  text-align: center;
22}
23
24#choices {
25  list-style: none;
26  padding: 0;
27  margin-bottom: 40px;
28  font-size: 40px;
29  text-align: center;
30}
31
32#choices > li {
33  width: 500px;
34  border: 3px solid #ccc;
35  border-radius: 7px;
36  padding: 30px;
37  /* margin-bottom: 20px; */
38  cursor: pointer;
39  margin: auto;
40}
41
42#choices > li:hover {
43  background: #f8f8f8;
44}
45
46#choices > li.correct {
47  background: #d4edda;
48  border-color: #c3e6cb;
49  color: #155724;
50  font-weight: bold;
51}
52
53#choices > li.correct::after {
54  content: " ... correct!";
55}
56
57#choices > li.wrong {
58  background: #f8d8da;
59  border-color: #f5c6cb;
60  color: #721c24;
61  font-weight: bold;
62}
63
64/* アフター擬似要素 */
65#choices > li.wrong::after {
66  content: " ... wrong!";
67}
68
69#btn, #result > a {
70  background: #3498db;
71  padding: 8px;
72  border-radius: 4px;
73  cursor: pointer;
74  text-align: center;
75  color: #fff;
76  box-shadow: 0 4px 0 #2880b9;
77}
78
79#btn.disabled {
80  background: #ccc;
81  box-shadow: 0 4px 0 #bbb;
82  opacity: 0.7;
83}
84
85#result {
86  position: absolute;
87  width: 300px;
88  background: #fff;
89  padding: 30px;
90  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
91  /* top: 50px; */
92  /* 画面外に */
93  top: -500px;
94  left: 0;
95  right: 0;
96  margin: 0 auto;
97  border-radius: 3px;
98  text-align: center;
99  /* ゆっくり終わる */
100  transition: 0.4s ease-out;
101}
102
103/* 元の位置に戻ってくる */
104#result.show{
105  top:50px;
106}
107
108#result > p {
109  font-size: 24px;
110}
111
112#result > a {
113  display: block;
114  text-decoration: none;
115}