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

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

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

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

JavaScript

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

Q&A

解決済

2回答

877閲覧

問題に説明文をつける

Ciel217

総合スコア9

XHTML

XHTMLは、eXtensible HyperText Markup Languageの略であり、SGMLベースであるHTMLとは違って、有効なXMLドキュメントにもなるHTMLアプリケーションです。XMLベースのツールを用いて生成されるHTMLページのためによく使われるマークアップ言語です。

JavaScript

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

0グッド

3クリップ

投稿2022/01/24 14:02

現在、英語の並び替えアプリを作っており、
問題がランダムに出題されるようになっているのですが、
その問題に日本語訳をつけたいです。
ここで、ランダムに出題される問題に対し、
どうしたらその問題と和訳を対応させられるのかがわかりません。
どなたか教えてください。
和訳はプログラム内のlet qで上から順番に
「私は日曜日に映画を時々見ます。」
「この本は私には難し過ぎます。」
「ユミは叔母の家に泊まることができません。」
「彼らは今どこでサッカーをしているのですか?」
でお願いします。

<!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,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]); 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(' '),true) .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,y,z)=>{ if(z.length>y+1){ x.setAttribute("draggable","true"); } x.addEventListener('drop',e=>{ if(x.getAttribute('draggable')){ 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; top: 0; bottom: 0; right: 0; left: 38%; } .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> <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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/01/25 02:29

拡張を繰り返しているので、そろそろクラスやモジュールにまとめるなど工夫が必要かもしれませんね データも外出しのjsonにした方がよいでしょう
guest

回答2

0

ベストアンサー

js

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 ?",];

たとえば、このリストを、以下のようにします:

js

1 let q = [ 2 {en:"i sometimes watch movies on Sunday .", 3 ja:"私は日曜日に映画を時々見ます。"}, 4 {en:"this book is too difficult for me .", 5 ja:"この本は私には難し過ぎます。"}, 6 {en:"yumi can't stay at her aunt's house .", 7 ja:"ユミは叔母の家に泊まることができません。"}, 8 {en:"where are they playing soccer now ?", 9 ja:"彼らは今どこでサッカーをしているのですか?"}];

すると、q[idx].en が英文、q[idx].ja が対応する和文となります。この構造に合わせて今のコードを更新しましょう。

投稿2022/01/24 14:13

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

まず q を二次元配列にして、

diff

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 ?",]; 6+ let q = [ 7+ ["i sometimes watch movies on Sunday .", "私は日曜日に映画を時々見ます。"], 8+ ["this book is too difficult for me .", "この本は私には難し過ぎます。"], 9+ ["yumi can't stay at her aunt's house .", "ユミは叔母の家に泊まることができません。"], 10+ ["where are they playing soccer now ?", "彼らは今どこでサッカーをしているのですか?"],];

各所調整します

diff

1- document.querySelector('.ans').addEventListener('click',()=>{ 2- const ansText = q_bk[pos].charAt(0).toUpperCase() + q_bk[pos].slice(1) ; 3- document.querySelector('.answer_view').innerHTML = ansText; 4- }); 5+ document.querySelector('.ans').addEventListener('click', () => { 6+ const ansText = q_bk[pos][0].charAt(0).toUpperCase() + q_bk[pos][0].slice(1); 7+ document.querySelector('.answer_view').innerHTML = ansText + "<br/>" + q_bk[pos][1]; // ここに日本語も出す 8+ });

diff

1- document.querySelectorAll('.view').forEach((view,idx)=>{ 2- shuffle(q[idx].split(' '),true) 3+ document.querySelectorAll('.view').forEach((view, idx) => { 4+ shuffle(q[idx][0].split(' '), true)

投稿2022/01/24 14:18

sum6

総合スコア232

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問