안녕하세요 생초짜 질문 좀 받아 주십시오..
본문
초등교사인데 온라인 수업에 아이들 위해서 자료를 만들어 보려고 합니다.
구글 사이트로 퀴즈를 넣고 싶은데.. 방탈출 컨셉으로..
여기저기서 찾아서 만든 소스코드가 제대로 작동하질 않습니다..
1. 정답을 입력하면 원하는 사이트로는 넘어갑니다.
2. 오답을 입력하면 오답 문구가 나타나지 않습니다.
3. 힌트보기를 누르면 힌트가 나타나지 않습니다.
4. 추가로 가운데 정렬을 하고싶은데 어떻게 기입해야할지 모르겠습니다...
고수님들의 조언 부탁드립니다..
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>퀴즈 프로그램 만들기</title>
<style>
body,input,button{font-size:20px;}
button{padding:50px 100px;}
</style>
<script>
function checkval()
{
var val ="남아메리카";
if(val == (document.getElementById("출력1").value))
{
window.open('https://padlet.com/whgksk8475/6256p354jkek1gxj');
}
else
{
alert("조금 더 생각해봅시다.");
}
}
</script>
</head>
<body>
<form name="aform">
<h1>페루가 속한 대륙은 어디일까요?</h1><p>
<p><input type="text" name="result" style="width:300px; height:70px;" id="출력1" onkeyup="if(event.keyCode==13) checkval();"/></p>
<p><input type="button" id="btn" value="정답 확인하기" style= "width:500px, height=200px," onclick="checkval()"/></p>
<p><input type="button" id="hint" value="힌트 확인하기" style= "width:500px, height=200px," onclick="hintclick(this)">
</form>
</body>
답변 2
좋은일 하시네요. 참고하세요.
코딩을 공부하시려면 들여쓰기를 명확히 하시는 습관도 중요합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>퀴즈 프로그램 만들기</title>
<style>
body,input,button{font-size:20px;}
button{padding:50px 100px;}
</style>
<script>
function checkval(){
var val ="남아메리카";
if(val == (document.getElementById("출력1").value)){
window.open('https://padlet.com/whgksk8475/6256p354jkek1gxj');
}else{
alert("조금 더 생각해봅시다.");
}
}
</script>
</head>
<body>
<form name="aform">
<div style="text-align:center;">
<h1>페루가 속한 대륙은 어디일까요?</h1><p>
<p><input type="text" name="result" style="width:300px; height:70px;" id="출력1" onkeyup="if(event.keyCode==13) checkval();"/></p>
<p><input type="button" id="btn" value="정답 확인하기" style= "width:500px, height=200px," onclick="checkval()"/></p>
<p><input type="button" id="hint" value="힌트 확인하기" style= "width:500px, height=200px," onclick="alert('힌트내용');">
</div>
</form>
</body>
</html>
좋은 일 하시네요 ~ 제가 쓴다고 생각 하고 한번 만들어 봤는데요 ~
혼자 하는것도 정말 중요하지만 시간이 없어서 급급 하시다면 .. 사용하세여...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>퀴즈 프로그램 만들기</title>
<style>
* {
font-size: 20px;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
form {
display: flex;
width: 1000px;
flex-direction: column;
}
h1 {
text-align: center;
font-size: 60px;
}
input {
width: 100%;
height: 70px;
text-align: center;
margin-bottom: 50px;
outline: 0;
border: 0;
border-bottom: 1px solid #333;
box-sizing: border-box;
}
.btn_wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
button {
width: 45%;
height: 200px;
}
.hint_area {
font-size: 50px;
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border: 3px solid #333;
box-sizing: border-box;
width: 1000px;
height: 500px;
display: none;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.hint_text {
font-size: 50px;
margin: 0;
font-weight: 700;
}
.close {
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h1>페루가 속한 대륙은 어디일까요?</h1>
<input type="text" name="result" id="input1" />
<div class="hint_area">
<p class="hint_text"></p>
<div class="close">닫기</div>
</div>
<div class="btn_wrap">
<button id="btn">정답 확인하기</button>
<button id="hint">힌트 확인하기</button>
</div>
</form>
<script>
var result = document.querySelector("#btn")
var hint_btn = document.querySelector("#hint")
var hint = document.querySelector(".hint_area");
var close = document.querySelector(".close");
var text = document.querySelector(".hint_text");
var success = "남아메리카"
result.addEventListener("click", function(e) {
e.preventDefault();
var input = document.querySelector("#input1").value;
if (success == input) {
window.location.href = "https://padlet.com/whgksk8475/6256p354jkek1gxj"
} else {
hint.style.display = "flex"
text.innerHTML = "조금 더 생각 해봅시다"
}
})
hint_btn.addEventListener("click", function(e) {
e.preventDefault();
hint.style.display = "flex"
text.innerHTML = "힌트"
})
close.addEventListener("click", function(e) {
e.preventDefault();
hint.style.display = "none"
})
</script>
</body>
</html>
