一日千秋 いちじつせんしゅう 一期一会 いちごいちえ 一部始終 いちぶしじゅう 一心同体 いっしんどうたい 一世一代 いっせいちだい 一石二鳥 いっせきにちょう 一体全体 いったいぜんたい 一朝一夕 いっちょういっせき 一方通行 いっぽうつうこう 一本調子 いっぽんちょうし 海千山千 うみせんやません 面白半分 おもしろはんぶん 花鳥風月 かちょうふうげつ 起死回生 きしかいせい 公明正大 こうめいせいだい 古今東西 ここんとうざい 後生大事 ごしょうだいじ 小春日和 こはるびより 五分五分 ごぶごぶ 三寒四温 さんかんしおん 三三五五 さんさんごご 山川草木 さんせんそうもく 四角四面 しかくしめん 四苦八苦 しくはっく 十中八九 じっちゅうはっく 自分自身 じぶんじしん 四方八方 しほうはっぽう 弱肉強食 じゃくにくきょうしょく 十人十色 じゅうにんといろ 春夏秋冬 しゅんかしゅうとう 四六時中 しろくじちゅう 青天白日 せいてんはくじつ 第一人者 だいいちにんしゃ 電光石火 でんこうせっか 日進月歩 にっしんげっぽ 二度手間 にどでま 二百十日 にひゃくとおか 年中行事 ねんちゅうぎょうじ 馬耳東風 ばじとうふう 八方美人 はっぽうびじん 早口言葉 はやくちことば 百発百中 ひゃっぱつひゃくちゅう 品行方正 ひんこうほうせい 真一文字 まいちもんじ 三日天下 みっかてんか 立身出世 りっしんしゅっせ 安全地帯 あんぜんちたい 異口同音 いくどうおん 一言一句 いちごんいっく 一念発起 いちねんほっき 一望千里 いちぼうせんり 一利一害 いちりいちがい 一挙一動 いっきょいちどう 一挙両得 いっきょりょうとく 一切合切 いっさいがっさい 一進一退 いっしんいったい 一心不乱 いっしんふらん 一刀両断 いっとうりょうだん 因果応報 いんがおうほう 右往左往 うおうさおう 永久不変 えいきゅうふへん 永遠不変 えいきゅうふへん 得手勝手 えてかって 温室効果 おんしつこうか 我田引水 がでんいんすい 起承転結 きしょうてんけつ 共存共栄 きょうぞんきょうえい 玉石混交 ぎょくせきこんこう 空前絶後 くうぜんぜつご 故事成語 こじせいご 言語道断 ごんごどうだん 才色兼備 さいしょくけんび 三拝九拝 さんぱいきゅうはい 自画自賛 じがじさん 自給自足 じきゅうじそく 試行錯誤 しこうさくご 自業自得 じごうじとく 四捨五入 ししゃごにゅう 七転八倒 しちてんばっとう 質疑応答 しつぎおうとう 質実剛健 しつじつごうけん 四面楚歌 しめんそか 縦横無尽 じゅうおうむじん 自由自在 じゆうじざい 取捨選択 しゅしゃせんたく 枝葉末節 しようまっせつ 心機一転 しんきいってん 針小棒大 しんしょうぼうだい 晴耕雨読 せいこううどく 誠心誠意 せいしんせいい 正正堂堂 せいせいどうどう 千変万化 せんぺんばんか 創意工夫 そういくふう 大器晩成 たいきばんせい 大義名分 たいぎめいぶん 大言壮語 たいげんそうご 中肉中背 ちゅうにくちゅうぜい 朝令暮改 ちょうれいぼかい 適材適所 てきざいてきしょ 天地無用 てんちむよう 天変地異 てんぺんちい 東奔西走 とうほんせいそう 得意満面 とくいまんめん 独立独歩 どくりつどっぽ 難行苦行 なんぎょうくぎょう 二束三文 にそくさんもん 年功序列 ねんこうじょれつ 半信半疑 はんしんはんぎ 反面教師 はんめんきょうし 不可思議 ふかしぎ 不言実行 ふげんじっこう 不承不承 ふしょうぶしょう 付和雷同 ふわらいどう 文武両道 ぶんぶりょうどう 平身低頭 へいしんていとう 暴飲暴食 ぼういんぼうしょく 本末転倒 ほんまつてんとう 無我夢中 むがむちゅう 武者修行 むしゃしゅぎょう 無理難題 むりなんだい 有名無実 ゆうめいむじつ 油断大敵 ゆだんたいてき 流言飛語 りゅうげんひご 理路整然 りろせいぜん 臨機応変 りんきおうへん 悪戦苦闘 異口同音 以心伝心 一期一会 一日千秋 一念発起 一挙一動 一刻千金 一進一退 一心不乱 一石二鳥 一朝一夕 一長一短 因果応報 温故知新 我田引水 完全無欠 起死回生 奇想天外 興味津々 空前絶後 古今東西 虎視眈々 言語道断 自画自賛 四苦八苦 七転八倒 弱肉強食 縦横無尽 十人十色 枝葉末節 心機一転 針小棒大 晴耕雨読 絶体絶命 全身全霊 前代未聞 大器晩成 大同小異 天真爛漫 二束三文 日進月歩 半信半疑 百発百中 不言実行 付和雷同 粉骨砕身 傍若無人 無我夢中 有名無実 用意周到 理路整然 臨機応変 暗中模索 意気揚々 一喜一憂 一刀両断 右往左往 岡目八目 花鳥風月 喜怒哀楽 金科玉条 厚顔無恥 公平無私 公明正大 五里霧中 三寒四温 自業自得 千変万化 馬耳東風 不眠不休 平身低頭 老若男女 和魂洋才 自給自足 二人三脚 一目瞭然 一攫千金 一心同体 他力本願 起承転結 急転直下 三日天下 三日坊主 事実無根 自問自答 首尾一貫 正々堂々 先手必勝 千差万別 単刀直入 適材適所 電光石火 独立独歩 八方美人 品行方正 抱腹絶倒 油断大敵 優柔不断 立身出世 悪口雑言 他人に対するひどい悪口 暗中模索 手がかりのないままいろいろやって みること 意気消沈 がっかりして元気がなくなること 意気投合 考えや好みが一致して心が通じ合うこと 意気揚々 得意で誇らしげな様子 異口同音 複数の人が同じことを言うこと 以心伝心 口に出さなくても心が通じ合うこと 意味深長 言葉に深い意味があること 因果応報 以前の行いにより、悪いことがあとで起こること 右往左往 うろたえ、あわてること 海千山千 経験を積んで、悪賢くなった人 雲散霧消 すべてきれいに消えてしまうこと。物事が一度に消えてなくなること 栄枯盛衰 栄えたり、おとろえたりすること 温故知新 古いことを調べることで、新しい考えや知識などを得ること 快刀乱麻 こじれたことを手ぎわよく処理すること 花鳥風月 自然の美しい景色や風雅な心 我田引水 自分に都合のいいように話をもっていくこと 感慨無量 深く身にしみて感じること 換骨奪胎 古人の作った詩文を利用して自分の価値があるもの・作品を作ること 勧善懲悪 善行を勧め、悪を懲らしめること 危急存亡 生き残れるかとうかのせとぎわ 起死回生 もうだめだという状況からもりかえすこと 起承転結 漢詩の組み立て方。物事の順序・組み立て 疑心暗鬼 すべてが信じられなくなり不安なこと 奇想天外 だれも思いつかないような変わったこと 喜怒哀楽 人間のさまざまな感情。その変化 旧態依然 目のままで、少しも進歩や発展がない様子 共存共栄 ともに生き、ともに栄えること 興味津々 非常に興味があること 虚虚実実 互いに力や計略を尽くして戦うこと 玉石混淆 優れたものと劣ったものが入り交じっていること 金科玉条 ぜひとも守らなければならない大切な規則 空前絶後 今までにも例がなく、これからも起 こらないような珍しいこと 空理空論 実際とかけはなれていて役に立たない理論 牽強付会 自分に都合がいいように無理やり理屈をこじつけること 厚顏無恥 あつかましく、ずうずうしいこと 広大無辺 広く大きく果てしないこと 荒唐無稽 言動がてたらめて、根拠がないこと 公明正大 はっきりしていて正しいこと 古今東西 昔も今も。世界中どこでも 古色蒼然 いかにも古びて見える様子。時代に 取り残された様子 小春日和 初冬の、春を思わせる暖かい天気のこと 孤立無援 頼りになる人がだれもいないこと 言語道断 言葉に表せないほどひどいこと 才色兼備 才能と美しさを兼ね備えていること 山紫水明 自然の景色がとても美しいこと 賛否両論 賛成と反対の両方の意見 自画自賛 自分のことを自分でほめること 自給自足 必要なものをすべて自分で作ること 試行錯誤 実際に行い、失敗しながら成功に向かうこと 自業自得 自分の行いによって自分に悪い結果が起こること 事実無根 事実に基づいていないこと 獅子奮迅 勢いが盛んなこと 自縄自縛 自分の言動で自分の動きがとれなくなって苦しむこと 志操堅固 自分の主義や考えなどをかたく守り 続けること 質疑心答 質問とそれに対する答えのこと 質実剛健 飾りけがなくまじめて、強くてしっかりしていること 自暴自棄 やけになってなげやりな行動をとること 自問自答 自分で問いかけて自分で答えること 弱肉強食 強いものが弱いものに勝って栄えること 縱橫無尽 思いきって自在に行うこと 自由自在 自分の思いどおりになること 周章狼狽 あわてふためくこと 秋霜烈日 刑罰や権威が非常に厳しいこと 主客転倒 物事の大小や軽重を取り違えること 熟慮断行 十分に考えたうえで、思いきって実行すること 取捨選択 よいものを取り、悪いものを捨てること 順風満帆 物事が順調に進むこと 笑止千万 愚かで、話にもならないこと 正真正銘 間違いなく本物であること 小心翼翼 気が小さくて、びくびくしていること 枝葉末節 大切なこと以外の細かいこと 諸行無常 万物は 常に移り変わって、変わらなはないこと 私利私欲 自分の利益だけを考えて行動しようとすること 支離滅裂 つながりやまとまりがなく、めちゃくちゃなこと 人事不省 意識がなくなること 神出鬼没 鬼神のように自在に出没して、所在が容易に計り知れないこと 針小棒大 ちょっとしたことを大げさに言うこと 新進気鋭 新たにその分野に出てきて、勢いが盛んなこと 森羅万象 宇宙にあるすべてのもの 晴耕雨読 のんびりとした自由な生活のこと 正々堂々 正しくりっぱな様子 青天白日 心にやましいことがない様子 清廉潔白 心が清く、後ろ暗いところが全くないこと 是々非々 よいことはよい、悪いことは悪いと、公平な態度をとること 絶体絶命 逃れられないせっぱつまった状態 前後不覚 前後の区別もつかないほど正体がなくなること 前代未聞 今までだれも聞いたことがないようなこと 創意工夫 他のまねをせず新しく考え出すこと 大器晚成 大人物は立派になるのに時間がかかること 大義名分 行動の理由となる、もっともな根拠 大言壮語 てきそうもないことをいばって言うこと 泰然自若 ゆったりと、落ち着きはらっていること 大胆不敵 大胆て、敵を敵とも思わないこと 大同小異 少しの違いはあるがほとんど同じこと 多種多樣 形や性質がいろいろと違うこと 単刀直入 遠回しではなくずばり本題を話すこと 直情怪行 人のことを考えず、自分の思ったと おりに行動すること 猪突猛進 向こう見ずに突き進むこと 津々浦々 全国の至る所 適材適所 能力に合う地位や仕事を与えること 徹頭徹尾 初めから終わりまて変わらないこと 電光石火 非常に短い時間。また、行動がとて も速いこと 天変地異 自然界に起こる大変動 同工異曲 見かけは違っても中味は同じこと 東奔西走 目的を達成するためあちこちかけ回 ること 日進月步 技術などがたえまなく進歩すること 馬耳東風 人の意見を気にとめようとしないこと 半信半疑 本当かどうかわからず完全には信じ られないこと 不言実行 黙って、やるべきことをやること 不即不離 つかず離れずの関係にあること 付和雷同 自分で考えず人の意見に従うこと 粉骨砕身 力の限り努力すること 文人墨客 詩文や書画などの道にたずさわる風流な人 平穏無事 事件や事故が起こらず、穏やかなこと 片言隻語 ほんのちょっとした短い言葉 傍若無人 自分の勝手気ままにふるまうこと 本末転倒 重要なものとつまらないものの扱 が反対になること 満場一致 その場にいるすべての人の意見がまとまること 無我夢中 あることに一生懸命打ち込むこと 唯我独尊 自分がだれよりも優れているとうぬばれること 有名無実 名は知られているが実質が伴わないこと 離合集散 離れたり集まったりすること 竜頭蛇尾 初めの勢いはいいが終わりがだめなこと 粒粒辛苦 事を成し遂げるために、こつこつと苦労を積み重ねること 臨機応変 その場に応じて適切な処理ができる こと
view source
JavaScript
document.title = '脳トレ四字熟語穴埋めクイズ';
$(function(){
$demo = $('#demo');
$words = $('#words');
$words.hide();
wordsText = $words.text();
wordsTextAry = wordsText.split('\n');
wordsTextAry.pop();
wordsAry = [];
charAry = [];
clearCount = 0;
$h1 = $('<h1>').text(document.title);
$demo.after($h1);
wordsTextAry.forEach(function(v){
var ary = v.split(' ');
var kanji = ary[0];
var yomi = ary[1];
charAry = charAry.concat(kanji.split(''));
wordsAry.push({
kanji:kanji,
yomi:yomi,
});
});
charAryOrg = _.uniq(charAry);
console.log(charAry);
function setQuiz(){
$demo.empty();
choiceAry = [];
answer = '';
var r = Math.floor(Math.random()*wordsAry.length);
var j = Math.floor(Math.random()*3);
var word = wordsAry[r];
word.kanji.split('').forEach(function(v,i){
$b = $('<b>').text(v);
$demo.append($b);
if(i===j){
$b.addClass('space');
choiceAry.push(v);
answer = v;
}
});
charAry = _.shuffle(charAryOrg);
choiceAry.push(charAry.pop());
choiceAry.push(charAry.pop());
choiceAry.push(charAry.pop());
choiceAry = _.uniq(choiceAry);
if(choiceAry.length<3){
choiceAry.push(charAry.pop());
}
choiceAry = _.shuffle(choiceAry);
choiceAry.forEach(function(v,i){
$b = $('<b>').text(v);
$demo.append($b);
$b.addClass('choice');
$b.on('click', function(){
if(!$(this).hasClass('choice')){return;}
if(v === answer){
$('.space').addClass('ok');
$(this).addClass('ok');
clearCount++;
} else {
$('.space').addClass('ng');
$(this).addClass('ng');
clearCount--;
}
$('.choice').addClass('select');
$('.choice').removeClass('choice');
$('.space').removeClass('space');
let key = getURLKEY();
if(key && clearCount === 9){
$key = $('<p>',{id:'keyCrypto'}).text(key);
$key.on('dblclick',function(){$(this).remove();});
$('#demo').append($key);
return;
}
$btn = $('<button>').text('次の問題へ');
$demo.append($btn);
$btn.on('click', function(){
setQuiz();
});
$c = $('<c>').text(clearCount);
$a = $('<a>',{target:'_blank',href:'https://www.google.com/search?q='+word.kanji}).text(word.kanji +' : 四字熟語の意味と読みを調べる');
$demo.append($a);
$demo.append($c);
});
});
}
setQuiz();
});
CSS
#demo{
user-select:none;
text-align:center;
}
#demo b{
display:inline-block;
width:25%;
height:25vw;
line-height:25vw;
text-align:center;
font-size:20vw;
font-weight:bold;
border:1px solid #000;
border-bottom:8px solid #000;
box-sizing:border-box;
font-family:serif;
}
#demo b.space{
color:transparent;
}
#demo b.select{
color:#555;
}
#demo b.ok{
background-color:#afa;
color:#000;
}
#demo b.ng{
background-color:#faa;
}
#demo b.choice{
background-color:#ccc;
color:#555;
}
#demo b.choice:hover{
background-color:#eee;
color:#000;
cursor:pointer;
}
button{
width:100%;
padding:12px;
font-size:5vw;
box-sizing:border-box;
}
#demo a{
display:inline-block;
padding:12px;
}
#demo c{
display:block;
font-size:60px;
font-weight:bold;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-text-quiz-yojijukugo/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。