아이를 위한 책으로 채팅 스타일의 수수께끼를 만들어 봤어요.
11580 단어 JavaScript초보자
나는 지금까지 잘하지 못했던 의식이 강한 자바스크립트를 상대해 보고 싶다.
나는 즐겁고 이해하기 쉬운 것이 좋다고 생각한다.사봐.
언어도 그림책을 통해 배울 수 있다고 하니 사람의 성공적인 체험이 중요하다.
채팅 스타일의 퀴즈를 만들어 보도록 하겠습니다.
책은 동물의 울음소리를 내기 때문에 영어로 동물의 이름을 대답한다
그곳은 세계유산의 문제로 바뀌었다.
quiz.html<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>世界遺産一問一答</title>
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<div class="chat-quiz">
<h2>世界遺産一問一答</h2>
<ul id="chat">
<li>世界遺産の問題を出すよ！それでは問題です！！！</li>
<li>ででん！</li>
</ul>
<input type="text">
<button type="button">答え</button>
</div>
<script src="js/quizdata.js"></script>
<script src="js/quiz.js"></script>
</body>
</html>
대화 상자에 책의 이미지가 사용됩니다.
odd는 홀수 출제자, even은 짝수 응답자입니다.
일문일답이어서 연투할 수 없다.
quiz.css.chat-quiz {
width: 600px;
margin: auto;
}
input {
margin-left: 140px;
}
li:nth-child(odd) {
background: url("../img/girl.png");
width: 380px;
height: 21px;
padding: 20px 110px;
line-height: 13pt;
list-style: none;
}
li:nth-child(even) {
background: url("../img/boy.png");
width: 380px;
height: 21px;
padding: 20px 110px;
line-height: 13pt;
list-style: none;
}
익숙하지 않아, 자바스크립트
quizdata.js에서 문제와 답안을 만드는 수조.
가능하기 전에는 다음과 같은 문제가 발생하지 않을 것이다.
quizdata.jsvar quiz = [
['自由の女神はどこの国にあるでしょう？', 'アメリカ'],
['厳島神社に何県にあるでしょう？', '鹿児島'],
['モアイ像はどこの国にあるでしょう？', 'チリ'],
['姫路城に何県にあるでしょう？', '兵庫'],
['ナスカの地上絵はどこの国にあるでしょう？', 'ペルー'],
];
quiz.js로 처리하다.
원소와 id를 가져오면 js를 하는 것 같아요.
quiz.jsvar addMessage = (mes) => {
// ul要素を取得
var ul = document.getElementById('chat');
// li要素を作成
var li = document.createElement('li');
// テキスト情報を作成
var text = document.createTextNode(mes);
// ul要素に追加
li.appendChild(text);
ul.appendChild(li);
}
// 問題追加
var qnum = 0;
addMessage(quiz[qnum][0]);
var btn = document.querySelector('button');
btn.addEventListener('click', () => {
var ipt = document.querySelector('input');
addMessage(ipt.value);
if (ipt.value == quiz[qnum][1]) {
qnum += 1;
// 最後の問題の後は最初の問題に戻る
qnum %= quiz.length;
addMessage('正解！' + quiz[qnum][0]);
} else {
addMessage('違うよ〜');
}
});
확인해 주세요.
첫 페이지.
문제가 출제되고 있다.
아동 도서
부정확한 답안을 입력해 보세요.
정답을 맞히기 전에 이 문제입니다.경로가 없습니다.
정답을 입력해 보세요.
정답을 맞히면 다음 문제가 바로 표시됩니다.
느끼다
나는 아이를 향한 책이 의식이 강한 사람에게 좋다고 생각한다.
잘하지 못하는 의식이 줄어들어서 다행이다.
더 똑똑한 글씨가 있을 것 같아요.
처음에 나는 우직함이 가장 좋다고 생각했기 때문에 나는 딱 좋다고 생각했다.
읽어주셔서 감사합니다.
Reference
이 문제에 관하여(아이를 위한 책으로 채팅 스타일의 수수께끼를 만들어 봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Akane_nene/items/0f15c16006919fa319fd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>世界遺産一問一答</title>
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<div class="chat-quiz">
<h2>世界遺産一問一答</h2>
<ul id="chat">
<li>世界遺産の問題を出すよ！それでは問題です！！！</li>
<li>ででん！</li>
</ul>
<input type="text">
<button type="button">答え</button>
</div>
<script src="js/quizdata.js"></script>
<script src="js/quiz.js"></script>
</body>
</html>
.chat-quiz {
width: 600px;
margin: auto;
}
input {
margin-left: 140px;
}
li:nth-child(odd) {
background: url("../img/girl.png");
width: 380px;
height: 21px;
padding: 20px 110px;
line-height: 13pt;
list-style: none;
}
li:nth-child(even) {
background: url("../img/boy.png");
width: 380px;
height: 21px;
padding: 20px 110px;
line-height: 13pt;
list-style: none;
}
quizdata.js에서 문제와 답안을 만드는 수조.
가능하기 전에는 다음과 같은 문제가 발생하지 않을 것이다.
quizdata.js
var quiz = [
['自由の女神はどこの国にあるでしょう？', 'アメリカ'],
['厳島神社に何県にあるでしょう？', '鹿児島'],
['モアイ像はどこの国にあるでしょう？', 'チリ'],
['姫路城に何県にあるでしょう？', '兵庫'],
['ナスカの地上絵はどこの国にあるでしょう？', 'ペルー'],
];
원소와 id를 가져오면 js를 하는 것 같아요.
quiz.js
var addMessage = (mes) => {
// ul要素を取得
var ul = document.getElementById('chat');
// li要素を作成
var li = document.createElement('li');
// テキスト情報を作成
var text = document.createTextNode(mes);
// ul要素に追加
li.appendChild(text);
ul.appendChild(li);
}
// 問題追加
var qnum = 0;
addMessage(quiz[qnum][0]);
var btn = document.querySelector('button');
btn.addEventListener('click', () => {
var ipt = document.querySelector('input');
addMessage(ipt.value);
if (ipt.value == quiz[qnum][1]) {
qnum += 1;
// 最後の問題の後は最初の問題に戻る
qnum %= quiz.length;
addMessage('正解！' + quiz[qnum][0]);
} else {
addMessage('違うよ〜');
}
});
확인해 주세요.
첫 페이지.
문제가 출제되고 있다.
아동 도서
부정확한 답안을 입력해 보세요.
정답을 맞히기 전에 이 문제입니다.경로가 없습니다.
정답을 입력해 보세요.
정답을 맞히면 다음 문제가 바로 표시됩니다.
느끼다
나는 아이를 향한 책이 의식이 강한 사람에게 좋다고 생각한다.
잘하지 못하는 의식이 줄어들어서 다행이다.
더 똑똑한 글씨가 있을 것 같아요.
처음에 나는 우직함이 가장 좋다고 생각했기 때문에 나는 딱 좋다고 생각했다.
읽어주셔서 감사합니다.
Reference
이 문제에 관하여(아이를 위한 책으로 채팅 스타일의 수수께끼를 만들어 봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Akane_nene/items/0f15c16006919fa319fd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
나는 아이를 향한 책이 의식이 강한 사람에게 좋다고 생각한다.
잘하지 못하는 의식이 줄어들어서 다행이다.
더 똑똑한 글씨가 있을 것 같아요.
처음에 나는 우직함이 가장 좋다고 생각했기 때문에 나는 딱 좋다고 생각했다.
읽어주셔서 감사합니다.
Reference
이 문제에 관하여(아이를 위한 책으로 채팅 스타일의 수수께끼를 만들어 봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Akane_nene/items/0f15c16006919fa319fd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
