初心者によるMonacaでの英語並び替え問題制作

Question

前提・実現したいこと

当方現在monacaでAngular jsを用いた英語のクイズアプリを作成しております。
その上で以下のような英語の並び替え問題を作成したいと考えております。

①ランダムに並べられた単語ボタンをクリックすると順にtextareaに単語が入力される。
②単語がクリックされるとその単語ボタンが非表示になる。
③"1語戻す"ボタンをクリックすると単語ボタンをクリックした順にtextareaから入力された
単語を削除、同時に単語ボタンの再表示。

現在①②の実装は完成したのですが③の実装をどのような方法で進めればよいか分からず困っております。ネットで検索を繰り返しましたが、分からず埒が明かないため、この場で質問させていただこうと考えました。

どのような方法を用いればよいかを教えていただければ幸いです。よろしくお願いいたします。

イメージ

該当のソースコード

<ons-page>
  <div ng-controller="gameCtrl as game">
    <ons-toolbar>
	　　<div class="center">
				試作
	　　</div>
	</ons-toolbar>
　　<div class="question">
			<p>
				{{game.items.currentQ.text}}
			</p>
    </div>
    <div class="answerForm">
      <textarea class="textarea" style= "font-size:20px"; id="hoge" name="text" ></textarea>
    </div>
    <div class="choices">
　　　　<ons-row>
        <div ng-repeat="choice in game.items.currentQ.choices track by $index">
          <div class="choice">
            <button class="button"  id="{{$index}}" ng-click="game.add($index);game.hide($index)">{{choice}}</button>
          </div>
    	</div>
	　</ons-row>
　　</div>
    <div class="bottom">
      <button class="button" ng-click="game.back()">
      1語戻す
      </button>
    </div>
	</div>
</ons-page>

var app = angular.module('myApp',['onsen']);
app.controller('gameCtrl',function(questionsService,$scope){
    var me = this;
    me.items = {};
    var rightNum = 0;//
    var anserNum = null;
    var questions = null;
    
    var init = function(){
        me.items.currentNum = 0;
        questions = JSON.parse(JSON.stringify(questionsService.questions));
        me.items.totalNum = questions.length;
        questionInit();
    }
    
    var questionInit = function(){
        var currentQ = questions[me.items.currentNum];/
    	var qLength = currentQ.choices.length;
      me.items.currentQ = currentQ;
    };

   
    me.add=function($index){
       document.getElementById('hoge').value+=me.items.currentQ.choices[$index];
    };
   
    me.hide=function($index){
       document.getElementById(`{$index}`).style.visibility="hidden";
    };

    me.back=function($index){
       document.getElementById(`{$index}`).style.visibility="visible";
    };
   
   init();
});

// service
app.value('questionsService', {
	questions : [
                {
                "text": "あなたは毎日英語を勉強しなければなりません。",
                "answer": "You must study English every day ",
                "choices": ["You ","English ","must ","every ","study ","day "]
               },
              ]
});

試したこと

me.back=function(){
document.getElementById({$index}).style.visibility="visible";
};

上記のように入力しましたが、直前にクリックした単語ボタンのindexを記憶していないため、当然うまくいきません。どのような方法を用いれば実現できるでしょうか。

Answer 1

答えの単語の順番、単語の表示・非表示を配列で管理し、textareaはng-model、buttonはng-disabledを使用して制御すれば実現できます。

<ons-page ng-controller="gameCtrl as game">
    <ons-toolbar>
    　　<div class="center">
                試作
    　　</div>
    </ons-toolbar>
　　<div class="question">
            <p>
                {{game.items.currentQ.text}}
            </p>
    </div>
    <div class="answerForm">
      <textarea class="textarea" style= "font-size:20px"; id="hoge" name="text" ng-model="game.answer"></textarea>
    </div>
    <div class="choices">
　　　　<ons-row>
        <div ng-repeat="choice in game.items.currentQ.choices track by $index">
          <div class="choice">
            <button class="button" id="{{$index}}" ng-click="game.choiceWord($index)" ng-disabled="game.items.currentQ.status[$index]">{{choice}}</button>
          </div>
        </div>
    　</ons-row>
　　</div>
    <div class="bottom">
      <button class="button" ng-click="game.back()">
      1語戻す
      </button>
    </div>
</ons-page>

app.controller('gameCtrl',function(questionsService,$scope){
    var me = this;
    me.items = {};
    me.answer = "";   // textareaの答え
    var rightNum = 0;//
    var anserNum = null;
    var questions = null;

    var init = function(){
        me.items.currentNum = 0;
        questions = JSON.parse(JSON.stringify(questionsService.questions));
        me.items.totalNum = questions.length;
        questionInit();
    }

    var questionInit = function(){
      var currentQ = questions[me.items.currentNum];
      var qLength = currentQ.choices.length;
      me.items.currentQ = currentQ;
      me.answer = "";                 // textareaの答え
      me.items.currentQ.answer = [];  // 答えの単語の順番
      me.items.currentQ.status = [];  // 単語の選択有無
      for (var i = 0; i < qLength; i++) {
        me.items.currentQ.status.push(false);
      }
    };

    me.showAnswer = function () {
      var answer = "";
      for (var i = 0; i < me.items.currentQ.answer.length; i++) {
        answer += me.items.currentQ.answer[i][1];
      }
      me.answer = answer;
    };

    me.choiceWord = function (index) {
      me.items.currentQ.answer.push([index, me.items.currentQ.choices[index]]); // 選択した単語を追加
      me.items.currentQ.status[index] = true;   // 単語を非表示
      me.showAnswer();
    };

    me.back = function () {
      var len = me.items.currentQ.answer.length;
      if (len > 0) {
        var index = me.items.currentQ.answer[len - 1][0];
        me.items.currentQ.status[index] = false;  // 単語を表示
        me.items.currentQ.answer.pop();           // 一番最後の単語を削除
        me.showAnswer();
      }
    };

    /*me.add=function($index){
       document.getElementById('hoge').value+=me.items.currentQ.choices[$index];
    };

    me.hide=function($index){
       document.getElementById(`{$index}`).style.visibility="hidden";
    };

    me.back=function($index){
       document.getElementById(`{$index}`).style.visibility="visible";
    };*/

   init();
});

Comments

[jun9]

otak-labさん　こんにちは。ご回答いただきありがとうございました。お教えいただいた通り、ng-model、ng-disabledディレクティブを用いることで、表示/非表示を実現させることができました。しかし、配列の管理で分からない点があります。

(Javascriptのme.showAnswer部分)

for (var i = 0; i < me.items.currentQ.answer.length; i++) {
answer += me.items.currentQ.answer[i][1];
}

この部分の[i][1]はどのような働きをしているのでしょうか。この部分で"answer"にクリック時の単語がt追加されるのは分かるのですが、仕組みがいまだに理解できません。再度ご回答いただければ助かります。

[otak-lab]

me.items.currentQ.answerの配列は、選択した単語のindex([0])と単語([1])が入っています。例えば、 [0,You][2,must][4,study]と3つ選択した場合、me.items.currentQ.answer.lengthは3なので、forループで選択した順番に単語([1])を結合して、 "You must study"という答えを作成します。

[jun9]

お返事が遅くなり申し訳ありません。ご説明いただいた内容を理解し、この問題を解決させることができました。ご回答いただいたお二人に感謝いたします。

Answer 2

addの時に配列に$indexをpushし、
backの時に配列の最後の要素を参照すれば良いのではないでしょうか。

Angular が分からないため下のコードはイメージです

// 選択されたindexの順番を記録する配列
me.indexOrder = []

me.add = function($index) {
  // push
  me.indexOrder.push($index)
  document.getElementById('hoge').value += me.items.currentQ.choices[$index]
}

me.back = function() {
  // pop
  const index = me.indexOrder.pop()
  document.getElementById(`{index}`).style.visibility="visible";

  const hoge = document.getElementById('hoge')
  // 空白区切りで配列にして最後の単語をpopで削除
  let text = hoge.value.split(" ")
  text.pop()
  // 空白区切りの文字列にする
  text = text.join(" ")
  hoge.value = text
}

趣旨とはずれますが、$indexが数値だと、そのままIDに指定するのは大丈夫なのかなという気がします。