質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

解決済

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

jun9
jun9

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

2回答

0評価

0クリップ

1738閲覧

投稿2020/12/05 12:29

前提・実現したいこと

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

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

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

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

イメージ

イメージ説明

該当のソースコード

html

<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>

JavaScript

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(); });

JavaScript

// 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を記憶していないため、当然うまくいきません。どのような方法を用いれば実現できるでしょうか。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。