プログラムの正誤判定をwebサイトで行い、出力結果のみをHTML内で表示したい

前提

HTMLとJavascriptでプログラムを並び替えて正誤判定を行うような学習用のシステムを作っています。
checkボタンを押すと、並び替えたプログラムが配列として保存されます。そこで、配列をプログラムテストサイトに移動し、実行結果だけをHTML内に表示したいと考えています。何か参考になるような記事やアドバイス等がございましたら回答お願いいたします。

ソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5	<title>短冊プログラム</title>
6    <!-- スタイルシート(外部CSSファイル)を読み込む -->
7    <link rel="stylesheet" href="style.css">
8</head>
9
10
11<body>
12
13    <h2>プログラムを正しい順番に並べ替えてください</h2>
14
15    <!-- 並び替えるリスト -->
16    <div class="list" id="list1">
17        <div class="list-item">printf("Hello,World\n");</div>
18        <div class="list-item">{</div>
19        <div class="list-item">main()</div>
20        <div class="list-item">}</div>
21    </div>
22
23    <!-- 並び替えライブラリ読み込み・生成 -->
24    <script src="Sortable.min.js"></script>
25    <script>
26        var el = document.getElementById('list1');
27        var sortable = new Sortable(el, {
28            animation: 150,
29            ghostClass: "ghost"
30        });
31
32        // 正誤判定プログラム
33        function check() {
34
35            //挿入用の空配列
36            let answer = [];
37
38            //正しい順番の配列(正誤判定用)
39            var correctAnswer = ["main()","{","printf(\"Hello,World\\n\");","}"];
40
41            // list-itemクラスの要素の集合を取得
42            var listItems = document.getElementsByClassName("list-item");
43
44            //並び替えた配列の要素を空の配列に挿入
45            for(let i = 0; i < listItems.length; i++){
46                answer.push(listItems[i].innerText);
47            }
48            
49            console.log(correctAnswer);
50            console.log(answer);
51        
52            //並び替えた配列(inputArr)と正しい順番の配列(arrayCorrect)を比較し正誤判定
53            if (answer.toString() === correctAnswer.toString()) {
54                document.getElementById("result").textContent = "正解！";
55            }else{
56                document.getElementById("result").textContent = "不正解！";
57            }
58
59        }
60
61    </script>
62
63
64    <!-- 正誤判定ボタン -->
65    <br />
66    <div align="center">
67    <button class="button1" onclick="check()">check</button>
68    </div>
69
70    <br />
71    <h4><span id="result"></span></h4>
72
73</body>
74</html>

実現したいこと

配列を外部サイト(プログラムテストサイト)に移動させ実行し、出力結果のみを自HTML内に表示させたい

実行結果

yambejp

2022/11/14 11:28

まずはどういう動きなのか図示して、フローに落とし込んでみては？

kinoko_0129

2022/11/14 11:53

調べ直して追記いたします。申し訳ありません

BeatStar

2022/11/15 00:19

ご自分で組んだコードも提示してください。それとこれは一つのページ内で行うのでしょうか?それともindex.html→main.htmlという風に画面が遷移するのでしょうか?

kinoko_0129

2022/11/15 07:23

画面遷移は行わず、Checkボタンを押した際、下に実行結果を出力するようにしたいと考えています。

kinoko_0129

2022/11/15 07:25

コード追記しておきます

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

回答2件

ベストアンサー

クライアントサイドで実行とのことで、開発者ツールでコードを見れば正解の回答も丸わかりになるので、実際のサービスには向いていない手法ではありますが、ご自身の学習のために作成しているというのであればそれでもいいかと存じます。

考え方

正解の配列を用意する
その配列をランダムにシャッフルする
シャッフルされた順番でDOMを生成する
ユーザーがクリックした順番に、ユーザーの回答を保存する用配列に格納する
正解の配列と、ユーザーの配列の中身を比較して、一つでも違うならfalse、全部同じならtrueを戻す

完成コード例

動作確認用サンプル：https://jsfiddle.net/9wdv3ot6/1/

※Chromeで閲覧ください。JSFiddleの仕様上、Safariでは崩れます。

html
1<div class="container">
2  <p id="question-display">（ここに問題文本文が表示されます）</p>
3  <ul id="choices-display">
4  </ul>
5  <p id="user-answer-display" class="user-answer">（ここに選択された回答が表示されます）</p>
6  <button id="btn-answer">正誤判定をする</button>
7</div>

javascript
1// 出題文と、正答の設定
2const quizData = {
3  question: 'アルファベット順に並べよ。',
4  answer: ['A', 'B', 'C', 'D']
5}
6// ユーザーの選択した回答を格納する配列
7const userAnswers = [];
8
9// 必要な要素の取得
10const questionDisplay = document.querySelector('#question-display');
11const choicesDisplay = document.querySelector('#choices-display');
12const userAnswerDisplay = document.querySelector('#user-answer-display');
13const btnAnswer = document.querySelector('#btn-answer');
14
15// ページ読み込み時に問題を設置
16window.addEventListener('DOMContentLoaded', setQuiz);
17// 「正誤判定」ボタンのクリックイベントを設定
18btnAnswer.addEventListener('click', checkAnswer);
19
20/**
21 * 問題を設置する関数
22 *
23 */
24function setQuiz() {
25	// 出題文を設置
26  questionDisplay.textContent = quizData.question;
27
28	// 正答の配列をシャッフル
29  const choices = quizData.answer.shuffle();
30
31	// シャッフルした配列をもとに、要素<li><input type="button"></li>を生成する
32  for (const choice of choices) {
33    const newLi = document.createElement('li');
34    const newInputBtn = document.createElement('input');
35    newInputBtn.type = 'button';
36    newInputBtn.value = choice;
37    newInputBtn.addEventListener('click', storeUserAnswer, {
38      once: true
39    });
40
41    newLi.appendChild(newInputBtn);
42    choicesDisplay.appendChild(newLi);
43  }
44}
45
46/**
47 * 選択肢をクリックしたら、配列に格納する関数
48 *
49 */
50function storeUserAnswer(event) {
51  const clickedBtn = event.currentTarget;
52  const value = clickedBtn.value;
53
54  userAnswers.push(value);
55  clickedBtn.disabled = true;
56
57  userAnswerDisplay.textContent = userAnswers.join(' ');
58}
59
60/**
61 * 正誤判定する関数
62 *
63 */
64function checkAnswer() {
65  let isCorrect = true;
66  const isSameLength = quizData.answer.length === userAnswers.length;
67
68  if (!isSameLength) {
69    isCorrect = false;
70  } else {
71    for (let i = 0; i < quizData.answer.length; i++) {
72      const correctAnswer = quizData.answer[i];
73      const userAnswer = userAnswers[i];
74      
75      if (correctAnswer !== userAnswer) {
76      	isCorrect = false;
77        break;
78      }
79    }
80  }
81
82	alert(isCorrect ? '正解！' : '残念');
83  
84  location.reload();
85}
86
87
88/**
89 * 配列の順番をシャッフルするメソッド
90 * @return {object} 配列
91 */
92Array.prototype.shuffle = function() {
93  const arr = [...this];
94  for (let i = arr.length - 1; i >= 0; i--) {
95    const j = Math.floor(Math.random() * (i + 1));
96    [arr[i], arr[j]] = [arr[j], arr[i]];
97  }
98
99  return arr;
100}