並び替え要素の位置固定

JavaScriptで英語の並べ替えをしており、
今現在のプログラムは問題文にピリオドがなく
解答を見ることでピリオドが表示されるようになっているのですが
疑問文の問題を作ろうとしたとき、
最後が？にならずピリオドで解答が表示されてしまいます。
そのため問題文の時点で一番最後のところにピリオドや？をつけたいのですが
ピリオド等も並び替えの要素となってしまい位置が固定できません。
疑問文はlet q の4つ目です。
並び替え要素の位置固定の方法かどなたか教えてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>並び替え問題</title>

<script>
  let q_bk = [];
  let pos = 0;

  function btnActivate() {
      document.querySelector('#prev').disabled = (pos === 0);
      document.querySelector('#next').disabled = (pos === q_bk.length - 1);
  }

  window.addEventListener('DOMContentLoaded', ()=>{

    document.querySelector('.ans').addEventListener('click',()=>{
        const ansText = q_bk[pos].charAt(0).toUpperCase() + q_bk[pos].slice(1) + ".";
        document.querySelector('.answer_view').innerHTML = ansText;
    });

    btnActivate();

    const shuffle=x=>x.map(y=>[y,Math.random()]).sort((y,z)=>y[1]-z[1]).map(y=>y[0]);
    let q = [
      "i sometimes watch movies on Sunday",
      "this book is too difficult for me",
      "yumi can't stay at her aunt's house",
      "where are they playing soccer now ?",];
    q=shuffle(q);
    q_bk = [...q]
    document.querySelectorAll('.view').forEach((view,idx)=>{
    shuffle(q[idx].split(' '))
        .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
    view.addEventListener('dragover',e=>e.preventDefault());
    var t=null;
    view.querySelectorAll('div').forEach(x=>{
       x.setAttribute("draggable","true");
       x.addEventListener('drop',e=>{
        view.insertBefore(t,x.nextElementSibling);
        });
        x.addEventListener('dragstart',e=>{
          t=e.target;
        });
      });
    });

    document.querySelector('.btn-score').addEventListener('click',()=>{
      let score = 0;
      const totalScore = document.getElementById('score-message');
      document.querySelectorAll('.view').forEach((view,idx)=>{
        const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
        if(q[idx]==a) score++;
      });
      totalScore.textContent = score + "点";
    });
  });

  window.addEventListener('DOMContentLoaded', ()=>{
  const next=document.querySelector('#next');
  const q=[...document.querySelectorAll('.q')];
  next.addEventListener('click',()=>{
    pos = pos + 1;
    document.querySelector('.answer_view').innerHTML = "";
    const active=document.querySelector('.q:not([hidden])');
    const idx=q.indexOf(active);
    active.setAttribute('hidden','');
    q[idx+1].removeAttribute('hidden');
    btnActivate();
  });
});

window.addEventListener('DOMContentLoaded', ()=>{
  const prev=document.querySelector('#prev');
  const q=[...document.querySelectorAll('.q')];
  prev.addEventListener('click',()=>{
    pos = pos - 1;
    document.querySelector('.answer_view').innerHTML = "";
    const active=document.querySelector('.q:not([hidden])');
    const idx=q.indexOf(active);
    active.setAttribute('hidden','');
    q[idx-1].removeAttribute('hidden');
    btnActivate();
  });
});
</script>

<style type="text/css"> 
    body {
      font-family: serif;
      text-align: center;
    }
    .quizzes-container {
      width: 400px;
      margin: 50px auto;
    }
    .quiz-container {
      border-bottom:1px solid black;
      padding-bottom: 20px;
    }
    #score-container {
      border: 1px solid black;
      height: 50px;
      width: 20%;
      position: relative;
      left: 40%;
    }
    .btn-score {
      display: block;
      margin: 20px auto;
      font-family: serif;
      background-color: white;
    }
    .view{
      display:flex;
      position: relative;
      left:35%;
    }
    .view div{border:solid 2px;padding:8px 16px 8px 16px ;}
    .view div:not(:first-child){border-left:solid 0px;}
</style>

<H2>並び替え問題</H2>
<div class="quiz-container"></div>
<div class="q">
<h2>第1問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div>
<div class="q" hidden>
<h2>第2問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div>
<div class="q" hidden>
<h2>第3問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div><br>
<div class="q" hidden>
<h2>第4問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div><br>

<input type="button" value="前へ" id="prev">
<input type="button" value="次へ" id="next"><br><br>
  <div id="score-container">
    <p id="score-message"></p>
  </div><button class="btn-score" type="button">合計得点を見る</button></div>
</div><button class="ans" type="button">解答を見る</button></div>
<div class="answer_view"></div>

行動規範の内容に同意します

回答1件

ベストアンサー

まず、問題文にピリオドやクエスチョンはいれてください

javascript
1  let q = [
2    "i sometimes watch movies on Sunday .",
3    "this book is too difficult for me .",
4    "yumi can't stay at her aunt's house .",
5    "where are they playing soccer now ?",];

shuffleに末尾固定フラグをつけます

javascript
1  const shuffle=(x,flg)=>x.map((y,z)=>[y,(flg&&x.length==z+1)?1:Math.random(),z]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);

各問のシャッフル時に固定フラグを設定します

javascript
1      shuffle(q[idx].split(' '),true)

末尾からdraggable属性を外し、末尾へdropもできないようにします

javascript
1      view.querySelectorAll('div').forEach((x,y,z)=>{
2        if(z.length>y+1){
3          x.setAttribute("draggable","true");
4        }
5        x.addEventListener('drop',e=>{
6          if(x.getAttribute('draggable')){
7            view.insertBefore(t,x.nextElementSibling);
8          }
9        });
10        x.addEventListener('dragstart',e=>{
11          t=e.target;
12        });
13      });