잡다한 사전

퀴즈 정답 화면 제작하기 ( 사이트 제작 5 ) 본문

사이트제작/사이트제작 공부하기

퀴즈 정답 화면 제작하기 ( 사이트 제작 5 )

잡사전집사 2021. 1. 22. 00:19
반응형

이번 장에서는 퀴즈를 정답을 맞혔을 때 정답이라고 나타나는 화면을 제작해 보겠습니다~

 

정답을 입력했을 때, 다음장에서 정답을 알려주는 사이트를 만들 것입니다. 

(php를 이용해서 정답인지 확인한 후, 넘어가도록 기능을 구현해 줄 것입니다.)

첫 번째!!

 

전 장에서 퀴즈 화면을 제작해주었는데요. 

퀴즈 화면에서 퀴즈 정답을 입력했을 때 정답을 확인한 후

정답 화면으로 넘어가도록 코드를 작성해 주도록 하겠습니다~

퀴즈화면

PHP코드

<!DOCTYPE html>
<html>
<meta charset="utf-8">
    <body>
    <?php
	$name = $_GET["name"];
	if($name == "(입력한 정답)"){
		echo ("<script>location.href='../sucess/sucess2.html';</script>");
	}
	?>
    </body>
</html>

 

위 코드를 보시면 입력한 정답이 맞으면 sucess폴더에 있는 sucess2.html이 실행되도록 코드가 되어 있는 것을 알 수 있습니다. ( success2.html 사이트는 밑에서 제작하는 것을 보여드릴게요~)

 

퀴즈 화면에서 입력한 정답이 PHP 파일에 저장되어 있는 정답과 일치하다면 success2.html로 이동하는 것입니다!!

 

두 번째!! 

 

success2.html을 위 코드에서 입력을 해서 정답이 일치했을 때 넘어가도록 코드를 짜주었는데요.

먼저 사이트 사진을 보고 코드를 알려드릴게요~

퀴즈 정답 화면

대부분의 퀴즈사이트 구성은 기본 틀을 구성으로 기능을 바꿔주면서 구현해줄 것이기 때문에 기본 사이트 틀은 비슷하게 진행하고 있습니다~

 

HTML 코드

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="sucstyle.css">
        <title>Juyoung homepage</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="page-container">
        <div class="login-form-container shadow">
            <div class="login-form-right-side">
                <div class="top-logo-wrap">
                    
                </div>
                <h1>정답!!</h1>
                <br>
                <p>축하해요~~ <br> 이제 다음문제를 맞춰볼까요~~? </p>
            </div>
            <div class="login-form-left-side">
                <form action="sucess.php"></form>
                    <div class="login-input-container">
                    </div>
                    
                    <div class="login-btn-wrap">
                        <button class="login-btn" value="sucess" onclick="location.href='../third/third.html'">다음 문제</button>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <center><p> 문구 </p></center>
                </form>
            </div> 
        </div>            
    </div>        
    </body>
</html>

위 코드에서 button에서 onclick() 함수를 사용해서 클릭했을 때 다음 문제로 넘어가도록 코드를 작성해 주었습니다~

 

코드를 보시고 이해가 안가시는 부분이 있으시면, 댓글 부탁드립니다~

 

오늘은 간단하게 문제와 문제 사이에 정답을 확인하는 사이트를 제작해 보았습니다~ 

 

앞에 내용에서 CSS을 이용해서 디자인을 한 내용을 읽으시면, 쉽게 디자인을 따라하실 수 있을 거에요!!

 

* 읽어보시고 의견 댓글 남겨주시면 참고해서 수정하도록 하겠습니다!!

* 읽어주셔서 감사합니다~

반응형

'사이트제작 > 사이트제작 공부하기' 카테고리의 다른 글

웹 개발 기초 강의 - 어떤 개발을 해야할까?  (5) 2024.10.10
(next) 인스타 게시물 내 사이트에서 확인하기(1)  (3) 2024.03.15
퀴즈 화면 제작하기 ( 사이트 제작 4 )  (0) 2021.01.10
Home 화면 제작하기 ( 사이즈 제작 3 )  (4) 2021.01.09
로그인 페이지 기능 구현 ( 사이트 제작 2)  (3) 2021.01.07
'사이트제작/사이트제작 공부하기' Related Articles more