あゆ間違い探し
Embedded Files
SVGソースコード
SVGソースコード
<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="Sakamoto Takashi">
<title>7つの間違い</title>
<style>
body { background: whitesmoke; padding: 5px 10px 5px 10px; line-height: 1.8; }
hr { height: 0; margin: 5; padding: 0; border: solid 1px gray; }
h1 { font-size: 160%; color: black; text-shadow: 3px 3px 3px lightgray; line-height: 1.5; margin-bottom: 0; }
h2 { font-size: 120%; color: black; text-shadow: 2px 2px 2px lightgray; }
h3 { font-size: 100%; color: black; text-shadow: 1px 1px 2px lightgray; }
table { border-collapse: collapse; }
th.border, td.border { border: solid 2px gray; padding: 0px 5px 0px 5px; text-align: left;}
div.indent { margin-left: 2em; }
.button { font-family: monospace; font-weight: 700; font-size: 115%;}
.key { font-family: monospace; font-weight: 700; font-size: 115%; }
.label { font-family: monospace; font-weight: 700; font-size: 115%; }
.name { font-family: monospace; font-weight: 700; font-size: 115%; }
</style>
</head>
<body>
<h1>７つの間違いを探そう<hr></h1>
<span style="font-weight: 700;">見つけた間違い: <span id="summary"></span> <span id="finish" style="color: red;"></span></span>
<table width="100%" border="1"><tr><td>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-9011 -9011 18022 18022">
<g stroke-width="100" stroke="black" fill="#8080ff" stroke-linecap="round">
<path d="M 2434,-856 C 2464,-1279 1337,-1505 237,-1359 C -219,-218 -2339,1613 -3386,2289 L 2434,-856 M -4793,2942 C -6913,3698 -4458,4706 -2633,3433 L -4793,2942 M 329,-603 L 1362,-596 M -54,20 L 456,47 M 2094,2574 C 2523,4365 -1529,3821 -1368,3529 L 2094,2574"></path>
</g>
<g stroke-width="100" stroke="black" fill="#8080ff" stroke-linecap="round">
<path d="M 7014,-4099 C 2730,-5287 797,3548 -6260,1834 C -6589,1701 -6716,1277 -7662,867 L -6958,2399 L -7877,4011 L -6153,3129 C 2515,5458 6889,444 7873,-2640 C 7980,-2958 8041,-3124 7819,-3402 L 6417,-2852 L 7014,-4099 M -6548,2551 L -6978,2537 M -6595,2166 L -7139,1868 M -6884,2955 L -7353,3227 M 7018,3396"></path>
</g>
<g stroke-width="100" stroke="black" fill="#8080ff" stroke-linecap="round">
<path d="M 5010,-379 L 3503,335 C 3731,1588 4234,2610 4744,2610 L 5681,284 M 4751,494 L 3812,1111 M 4952,872 L 4288,2185"></path>
</g>
<g stroke-width="10" stroke="black" fill="black" stroke-linecap="round">
<path d="M 4898,-2519 C 5260,-2525 5199,-2087 4904,-2061 C 4582,-2074 4569,-2499 4898,-2519"></path>
</g>
<g stroke-width="100" stroke="black" fill="none" stroke-linecap="round">
<path d="M 3999,-2545 C 3625,-1624 4090,-760 4663,-569"></path>
</g>
</svg>
</td><td>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-9011 -9011 18022 18022">
<!-- 7:文章 -->
<g id="wrong7">
<text x="-8800" y="-8500" style="stroke: black; fill: black; font-size: 500;user-select: none;">左の枠の中と違うところが7つあるよ。見つけたらマウスでクリックしよう。</text>
</g>
<!-- 1:ひれ -->
<g id="wrong1" stroke-width="100" stroke="black" fill="#8080ff" stroke-linecap="round">
<path d="M -2512,3407 C -2512,3244 -1174,3182 -1174,3182 C -639,3121 -845,4061 -1668,4123 C -2429,4123 -3026,3714 -2512,3407"></path>
</g>
<!-- 2:毛が3本 -->
<g id="wrong2" stroke-width="100" stroke="black" fill="none" stroke-linecap="round">
<path d="M 3574,-4216 L 4154,-3418 M 4158,-3425 C 4081,-3687 4099,-4004 4259,-4226 M 3268,-3702 C 3695,-3671 3911,-3577 4153,-3422"></path>
</g>
<g stroke-width="100" stroke="black" fill="#8080ff" stroke-linecap="round">
<path d="M 2434,-856 C 2464,-1279 1337,-1505 237,-1359 C -219,-218 -2339,1613 -3386,2289 L 2434,-856 M -4793,2942 C -6913,3698 -4458,4706 -2633,3433 L -4793,2942 M 329,-603 L 1362,-596 M -54,20 L 456,47 M 2094,2574 C 2523,4365 -1529,3821 -1368,3529 L 2094,2574"></path>
</g>
<!-- 3: 色 -->
<g id="wrong3" stroke-width="100" stroke="black" fill="#a0ffa0" stroke-linecap="round">
<path d="M 7014,-4099 C 2730,-5287 797,3548 -6260,1834 C -6589,1701 -6716,1277 -7662,867 L -6958,2399 L -7877,4011 L -6153,3129 C 2515,5458 6889,444 7873,-2640 C 7980,-2958 8041,-3124 7819,-3402 L 6417,-2852 L 7014,-4099 M -6548,2551 L -6978,2537 M -6595,2166 L -7139,1868 M -6884,2955 L -7353,3227 M 7018,3396"></path>
</g>
<g stroke-width="100" stroke="black" fill="#8080ff" stroke-linecap="round">
<path d="M 5010,-379 L 3503,335 C 3731,1588 4234,2610 4744,2610 L 5681,284 M 4751,494 L 3812,1111 M 4952,872 L 4288,2185"></path>
</g>
<g stroke-width="10" stroke="black" fill="black" stroke-linecap="round">
<path d="M 4898,-2519 C 5260,-2525 5199,-2087 4904,-2061 C 4582,-2074 4569,-2499 4898,-2519"></path>
</g>
<g stroke-width="100" stroke="black" fill="none" stroke-linecap="round">
<path d="M 3999,-2545 C 3625,-1624 4090,-760 4663,-569"></path>
</g>
<!-- 4:目の中 -->
<g id="wrong4" stroke="none" fill="white" stroke-linecap="round">
<path d="M 4864,-2285 C 4861,-2368 5007,-2373 5009,-2288 C 5009,-2205 4863,-2209 4864,-2285 M 4761,-2297 C 4753,-2200 4841,-2108 4947,-2103 C 4805,-2072 4700,-2192 4761,-2297 M 6993,-4034"></path>
</g>
<!-- 5:歯 -->
<g id="wrong5">
<g stroke-width="30" stroke="black" fill="white" stroke-linecap="round">
<path d="M 7009,-4060 L 7118,-3779 L 6880,-3731 L 6974,-3514 L 6753,-3458 L 6844,-3282 L 6646,-3237 L 6686,-3097 L 6557,-3048 L 7009,-4060"></path>
</g>
<g stroke-width="30" stroke="black" fill="white" stroke-linecap="round">
<path d="M 6663,-2989 L 6734,-3114 L 6860,-3062 L 6923,-3218 L 7083,-3153 L 7138,-3339 L 7336,-3254 L 7388,-3451 L 7565,-3344 L 7605,-3528 L 7794,-3429 L 6663,-2989"></path>
</g>
</g>
<!-- 6:筋 -->
<g id="wrong6" stroke-width="100" stroke="black" fill="none" stroke-linecap="round">
<path d="M 4095,1547 L 4815,730"></path>
</g>
</svg>
</td></tr></table>
<script>
const differences = [
{id: 'wrong1', summary: '余分なヒレ', message: '左のアユは、このヒレがありません。'},
{id: 'wrong2', summary: '毛が三本', message: '左のアユは、頭に毛が生えていません。'},
{id: 'wrong3', summary: '色の違い', message: '左のアユとは、胴体の色が違っています。'},
{id: 'wrong4', summary: 'ひとみ', message: '左のアユは、黒目のみです'},
{id: 'wrong5', summary: '歯', message: '左のアユは、歯がありません。'},
{id: 'wrong6', summary: '余分な筋', message: '左のアユより、筋が多すぎます。'},
{id: 'wrong7', summary: '問題文', message: '左の枠内には、問題文がありません。。'},
];
const summary = document.querySelector('#summary');
const finish = document.querySelector('#finish');
let found = 0;
differences.forEach((diff) => {
const elem = document.querySelector('#'+diff.id);
elem.addEventListener('click', () => {
alert('正解です。\n' + diff.message);
if (summary.textContent.length != 0) { summary.textContent += ', '; }
summary.textContent += diff.summary;
++found;
if (found == 7) { finish.textContent = 'おめでとう。あなたは、すべての間違いを見つけました。'; }
},
{once: true}
);
})
</script>
</body>
Page updated
Google Sites
Report abuse