おしえて

画像を識別して、回答を表示させたい。

締切済

質問者：eum130
質問日時：2021/12/18 21:49
回答数：1件

画像を用意して、問いに当てはまる画像を下のBoxにドラッグで移動させ、
さらに下にある「答え合わせ」ボタンをクリックすると、
「答え合わせ」の場所が「〇」か「×」に変わるようにしたいです。

例えば、5つの画像（A.jpg、B.jpg、C.jpg、D.jpg、E.jpg）があり、
この中からAとCを選べば正解の場合に、どうなりますか。

回答の順番は問わず、AとC、CとA、どちらで回答しても「〇」、
正解以外のものが含まれている場合、（AとCとDなど）
もしくは、正解が足りない場合（Aのみ）は、「×」としたいです。

「×」になった場合は、「〇」になるまで、何度もクリック可能としたいです。
「答え合わせ」ボタンは、できればテキストで、難しい場合は、画像にしようと思っています。

画像をドラッグで移動させることはできましたが、「答え合わせ」の動作が分かりません。
つたない質問ですみませんが、教えてください。よろしくお願いします。

通報する

この質問は特に30代・女性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： sukitaro
回答日時：2021/12/19 11:07

そもそもJavaScriptではないのかもしれませんが。

もしそうだったら、こんな感じはどうでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
width: 100px;
height: 20px;
}
.dropzone {
width: 600px;
height: 200px;
border:1px solid #555;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="dropzone">
<p>ここから選ぶ</p>
<img alt="a" draggable="true" src="A.jpg">
<img alt="b" draggable="true" src="B.jpg">
<img alt="c" draggable="true" src="C.jpg">
<img alt="d" draggable="true" src="D.jpg">
<img alt="e" draggable="true" src="E.jpg">
</div>
<div id="ans" class="dropzone">
<p>ここに回答</p>
</div>
<input type="button" id="check" value="答え合わせ">

<script>
// drag&drop
let dragged;
document.addEventListener("dragstart", function(event) {
dragged = event.target;
}, false);
document.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
document.addEventListener("drop", function(event) {
if (event.target.className == "dropzone") {
event.target.appendChild( dragged );
}
}, false);

// 答え合わせ
const answer = { // a と cが答え
a: true,
b: false,
c: true,
d: false,
e: false,
};

const
A = document.getElementById('ans'),
C = document.getElementById('check');

C.addEventListener('click', ()=>{
select = [...A.querySelectorAll('img')].map(img => img.alt);
let flag = true;
for (let key in answer){
if(! answer[key] === select.includes(key)){
flag = false;
};
}
C.value = (flag)? '○': '×';
}, false);
</script>
</body>
</html>