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

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

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

MathJaxは、MathML/LaTeXなどで記述された数式をWebブラウザ上で整形・表示できるオープンソースのJavaScriptライブラリ。全てのモダンブラウザで動作し、プラグインのインストールやブラウザの設定などを行うことなく利用できます。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1417閲覧

mathjaxを全画面で反映させたいが画面変更で反映されなくなる。

pyamathon

総合スコア14

MathJax

MathJaxは、MathML/LaTeXなどで記述された数式をWebブラウザ上で整形・表示できるオープンソースのJavaScriptライブラリ。全てのモダンブラウザで動作し、プラグインのインストールやブラウザの設定などを行うことなく利用できます。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/09/01 06:47

編集2021/09/01 22:58

前提・実現したいこと

javascriptを使ってクイズのページを作成しています。
(追記)公式ページによれば動的環境での動作には表記の際に必要なメソッドがあることは理解しています。

発生している問題・エラーメッセージ

数学の問題を表示するためmathjaxを使用したのですが、問題が変わるごとに適用されません。
最初の問題は反応しているのでjavascriptの書く位置が悪いのかもしれません。
動的に表示するにはmathjax.typeset()を用いることはご教示いただき、
いろいろな位置に挿入しましたが問題文が表示されませんでした。
現在quiz_show()の最下段に入力されていますが問題文がクリックできなくなりました。

該当のソースコード(編集済み)

html

1<head> 2<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script> 3<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 4<script type="text/x-mathjax-config"> 5 MathJax.Hub.Config({ 6 TeX: { equationNumbers: { autoNumber: "AMS" }}, 7 tex2jax: { 8 inlineMath: [ ['$','$'], ["\(","\)"] ], 9 processEscapes: true 10 }, 11 "HTML-CSS": { matchFontHeight: false }, 12 displayAlign: "left", 13 displayIndent: "2em" 14 }); 15 </script> 16<script> 17$(function(){ 18 var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定 19 var quiz_html = quizArea.html(); //もう一度 を押した時に元に戻すため初期HTMLを変数で保管 20 var quiz_cnt = 0; //現在の問題数を管理 21 var quiz_fin_cnt = 5; //何問で終了か設定(クイズ数以下であること) 22 var quiz_success_cnt = 0; //問題の正解数 23 24 //クイズの配列を設定 25 //answerの選択肢の数はいくつでもOK ただし先頭を正解とすること(出題時に選択肢はシャッフルされる) 26 var aryQuiz = []; 27 aryQuiz.push( 28 { 29 question : '次の式を微分しなさい。$f(x)=2x-3$', 30 answer : ['2', '1', '-3', '-2'] 31 } 32 ,{ 33 question : '次の式を微分しなさい。$f(x)=4x-7$', 34 answer : ['4', '1', '-7', '-4'] 35 } 36 ,{ 37 question : '次の式を微分しなさい。$f(x)=5x-10$', 38 answer : ['5', '1', '-10', '-5'] 39 } 40 ,{ 41 question : '次の式を微分しなさい。$f(x)=5x^2-10$', 42 answer : ['$10x$', '$5x$', '5', '-10'] 43 } 44 ,{ 45 question : '次の式を微分しなさい。$f(x)=-5x-20$', 46 answer : ['-5', '2', '1', '-20'] 47 } 48 ); 49 50 quizReset(); 51 52 //回答を選択した後の処理 53 quizArea.on('click', '.quiz_ans_area ul li', function(){ 54 //画面を暗くするボックスを表示(上から重ねて、結果表示中は選択肢のクリックやタップを封じる 55 quizArea.find('.quiz_area_bg').show(); 56 //選択した回答に色を付ける 57 $(this).addClass('selected'); 58 if($(this).data('true')){ 59 //正解の処理 〇を表示 60 quizArea.find('.quiz_area_icon').addClass('true'); 61 //正解数をカウント 62 quiz_success_cnt++; 63 }else{ 64 //不正解の処理 65 quizArea.find('.quiz_area_icon').addClass('false'); 66 } 67 setTimeout(function(){ 68 //表示を元に戻す 69 quizArea.find('.quiz_ans_area ul li').removeClass('selected'); 70 quizArea.find('.quiz_area_icon').removeClass('true false'); 71 quizArea.find('.quiz_area_bg').hide(); 72 //問題のカウントを進める 73 quiz_cnt++; 74 if(quiz_fin_cnt > quiz_cnt){ 75 //次の問題を設定する 76 quizShow(); 77 }else{ 78 //結果表示画面を表示 79 quizResult(); 80 } 81 }, 1500); 82 }); 83 84 //もう一度挑戦するを押した時の処理 85 quizArea.on('click', '.quiz_restart', function(){ 86 quizReset(); 87 }); 88 89 //リセットを行う関数 90 function quizReset(){ 91 quizArea.html(quiz_html); //表示を元に戻す 92 quiz_cnt = 0; 93 quiz_success_cnt = 0; 94 aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね 95 quizShow(); 96 } 97 98 //問題を表示する関数 99 function quizShow(){ 100 //何問目かを表示 101 quizArea.find('.quiz_no').text((quiz_cnt + 1)); 102 //問題文を表示 103 quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']); 104 //正解の回答を取得する 105 var success = aryQuiz[quiz_cnt]['answer'][0]; 106 //現在の選択肢表示を削除する 107 quizArea.find('.quiz_ans_area ul').empty(); 108 //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策 109 var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat()); 110 //問題文の配列を繰り返し表示する 111 $.each(aryHoge, function(key, value){ 112 var fuga = '<li>' + value + '</li>'; 113 //正解の場合はdata属性を付与する 114 if(success === value){ 115 fuga = '<li data-true="1">' + value + '</li>'; 116 } 117 quizArea.find('.quiz_ans_area ul').append(fuga); 118 }); 119   mathjax.typeset()//追記しました。 120 } 121 122 //結果を表示する関数 123 function quizResult(){ 124 quizArea.find('.quiz_set').hide(); 125 var text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解!'; 126 if(quiz_fin_cnt === quiz_success_cnt){ 127 text += '<br>全問正解おめでとう!'; 128 } 129 text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">'; 130 quizArea.find('.quiz_result').html(text); 131 quizArea.find('.quiz_result').show(); 132 } 133 134 //配列をシャッフルする関数 135 function arrShuffle(arr){ 136 for(i = arr.length - 1; i > 0; i--){ 137 var j = Math.floor(Math.random() * (i + 1)); 138 var tmp = arr[i]; 139 arr[i] = arr[j]; 140 arr[j] = tmp; 141 } 142 return arr; 143 } 144}); 145</script> 146<link rel="stylesheet" href="quiz1.css"> 147</head> 148<div class="quiz_area"> 149 <div class="quiz_set"> 150<span class="quiz_no">0</span>151 <div class="quiz_question"></div> 152 <div class="quiz_ans_area"> 153 <ul></ul> 154 </div> 155 <div class="quiz_area_bg"></div> 156 <div class="quiz_area_icon"></div> 157 </div> 158 <div class="quiz_result"></div> 159</div>

試したこと

問題文に対してのjavascriptの位置を変更しましたが変わりませんでした。
mathjax.typeset()の位置を変更するとそれ以降で動かなくなってしまう。

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

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

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

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

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

guest

回答2

0

自己解決

mathjaxで作成が自力では不可能だったのでKateXに変更し実装した。

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="utf-8"/> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 6<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous"> 7<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.js" integrity="sha384-31El76TwmbHj4rF9DyLsygbq6xoIobG0W+jqXim+a3dU9W53tdH3A/ngRPxOzzaB" crossorigin="anonymous"></script> 8<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script> 9 <script> 10 $(function(){ 11 var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定 12 var quiz_html = quizArea.html(); //もう一度 を押した時に元に戻すため初期HTMLを変数で保管 13 var quiz_cnt = 0; //現在の問題数を管理 14 var quiz_fin_cnt = 5; //何問で終了か設定(クイズ数以下であること) 15 var quiz_success_cnt = 0; //問題の正解数 16 17 //クイズの配列を設定 18 //answerの選択肢の数はいくつでもOK ただし先頭を正解とすること(出題時に選択肢はシャッフルされる) 19 var aryQuiz = []; 20 aryQuiz.push( 21 { 22 question : '次の式を微分しなさい。$f(x)=2x-3$', 23 answer : ['2', '1', '-3', '-2'] 24 } 25 ,{ 26 question : '次の式を微分しなさい。$f(x)=4x-7$', 27 answer : ['4', '1', '-7', '-4'] 28 } 29 ,{ 30 question : '次の式を微分しなさい。$f(x)=5x-10$', 31 answer : ['5', '1', '-10', '-5'] 32 } 33 ,{ 34 question : '次の式を微分しなさい。$f(x)=5x-10$', 35 answer :['5', '1', '-10', '-5'] 36 } 37 ,{ 38 question : '次の式を微分しなさい。$f(x)=5x-10$', 39 answer : ['5', '1', '-10', '-5'] 40 } 41 ); 42 43 quizReset(); 44 45 //回答を選択した後の処理 46 quizArea.on('click', '.quiz_ans_area ul li', function(){ 47 //画面を暗くするボックスを表示(上から重ねて、結果表示中は選択肢のクリックやタップを封じる 48 quizArea.find('.quiz_area_bg').show(); 49 //選択した回答に色を付ける 50 $(this).addClass('selected'); 51 if($(this).data('true')){ 52 //正解の処理 〇を表示 53 quizArea.find('.quiz_area_icon').addClass('true'); 54 //正解数をカウント 55 quiz_success_cnt++; 56 }else{ 57 //不正解の処理 58 quizArea.find('.quiz_area_icon').addClass('false'); 59 } 60 setTimeout(function(){ 61 //表示を元に戻す 62 quizArea.find('.quiz_ans_area ul li').removeClass('selected'); 63 quizArea.find('.quiz_area_icon').removeClass('true false'); 64 quizArea.find('.quiz_area_bg').hide(); 65 //問題のカウントを進める 66 quiz_cnt++; 67 if(quiz_fin_cnt > quiz_cnt){ 68 //次の問題を設定する 69 quizShow(); 70 renderMathInElement(document.body, {delimiters: [ 71 {left: "\[", right: "\]", display: true}, 72 {left: "$", right: "$", display: false} 73 ]}); 74 }else{ 75 //結果表示画面を表示 76 quizResult(); 77 } 78 }, 1500); 79 }); 80 81 //もう一度挑戦するを押した時の処理 82 quizArea.on('click', '.quiz_restart', function(){ 83 quizReset(); 84 }); 85 86 //リセットを行う関数 87 function quizReset(){ 88 quizArea.html(quiz_html); //表示を元に戻す 89 quiz_cnt = 0; 90 quiz_success_cnt = 0; 91 aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね 92 quizShow(); 93 } 94 95 //問題を表示する関数 96 function quizShow(){ 97 //何問目かを表示 98 quizArea.find('.quiz_no').text((quiz_cnt + 1)); 99 //問題文を表示 100 quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']); 101 //正解の回答を取得する 102 var success = aryQuiz[quiz_cnt]['answer'][0]; 103 //現在の選択肢表示を削除する 104 quizArea.find('.quiz_ans_area ul').empty(); 105 //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策 106 var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat()); 107 //問題文の配列を繰り返し表示する 108 $.each(aryHoge, function(key, value){ 109 var fuga = '<li>' + value + '</li>'; 110 //正解の場合はdata属性を付与する 111 if(success === value){ 112 fuga = '<li data-true="1">' + value + '</li>'; 113 } 114 quizArea.find('.quiz_ans_area ul').append(fuga); 115 116 }); 117 } 118 119 //結果を表示する関数 120 function quizResult(){ 121 quizArea.find('.quiz_set').hide(); 122 var text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解!'; 123 if(quiz_fin_cnt === quiz_success_cnt){ 124 text += '<br>全問正解おめでとう!'; 125 } 126 text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">'; 127 quizArea.find('.quiz_result').html(text); 128 quizArea.find('.quiz_result').show(); 129 } 130 131 //配列をシャッフルする関数 132 function arrShuffle(arr){ 133 for(i = arr.length - 1; i > 0; i--){ 134 var j = Math.floor(Math.random() * (i + 1)); 135 var tmp = arr[i]; 136 arr[i] = arr[j]; 137 arr[j] = tmp; 138 } 139 return arr; 140 } 141}); 142</script> 143<link rel="stylesheet" href="quiz1.css"> 144</head> 145<body> 146<div class="quiz_area"> 147 <div class="quiz_set"> 148<span class="quiz_no">0</span>149 <div class="quiz_question"></div> 150 <div class="quiz_ans_area"> 151 <ul></ul> 152 </div> 153 <div class="quiz_area_bg"></div> 154 <div class="quiz_area_icon"></div> 155 </div> 156 <div class="quiz_result"></div> 157</div> 158<script> 159 document.addEventListener("DOMContentLoaded", function() { 160 renderMathInElement(document.body, {delimiters: [ 161 {left: "\[", right: "\]", display: true}, 162 {left: "$", right: "$", display: false} 163 ]}); 164 }); 165 </script> 166</body>

投稿2021/09/03 01:26

pyamathon

総合スコア14

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

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

0

公式のドキュメントは読みましたか?

MathJax in Dynamic Content

投稿2021/09/01 06:53

int32_t

総合スコア21207

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

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

pyamathon

2021/09/01 07:55

ご返信ありがとうございます。 公式ページは読んだのですが、どこにmathjax.typeset()を挿入すればいいのかわかりませんでした。 ご教示くだされば幸いでございます。
int32_t

2021/09/01 07:59

MathJax に処理してほしいものを表示した後です。quizShow() の中の最後でどうでしょうか。
pyamathon

2021/09/01 08:43

ご返信ありがとうございます。 そうすると問題文をクリックできなくなりました。 クイズの回答の部分が動作しません。 ご教示ください。よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問