잡다한 사전

퀴즈 화면 제작하기 ( 사이트 제작 4 ) 본문

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

퀴즈 화면 제작하기 ( 사이트 제작 4 )

잡사전집사 2021. 1. 10. 04:25
반응형

이번 장에서는 퀴즈 화면을 제작해 보도록 할게요~

 

저번장에서 홈 화면에서 "시작해보자~"라는 버튼을 클릭하면 퀴즈가 시작하게 되는데 이때 실행되는 퀴즈 화면을 제작해보겠습니다~

 

첫 번째!!

 

퀴즈 화면 구성을 어떻게 하였는지 알아보도록 하겠습니다~

 

퀴즈 화면

퀴즈 화면은 위 사진 처럼 구성할 예정입니다. 

 

화면을 구성하는 HTML 코드부터 보여드리겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style3.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>Question 1</h1>
                <br>
                <p>질문? </p>
            </div>
            <div class="login-form-left-side">
                <form action="question1.php">
                    <div class="login-input-container">
                        <div class="login-input-wrap input-id">
                            <i class="far fa-envelope"></i>
                            <input placeholder="Name" type="text" name="name">
                        </div>
                    </div>
                    
                    <div class="login-btn-wrap">
                        <input type="submit" class="login-btn" value="Login">
                        <a href="#" >뭐죠..?</a>
                    </div>
                    
                </form>
            </div> 
        </div>            
    </div>        
    </body>
</html>

HTML 코드는 전 장에서 알려드린 HOME 화면 코드랑 많이 다르지 않은 것을 알 수 있어요.

그 이유는, 기본 틀은 그대로 이용을 하면서 기능을 변경해주고 있기 때문입니다.

(CSS파일은 다음장에서 코드를 보면서 더 자세히 설명드리도록 할게요~)

 

두 번째에서는 정답을 체크해주는 기능을 php로 기능을 구현해 보도록 하겠습니다. 

두 번째!!

 

위 코드를 보시면 "<input placeholder="Name" type="text" name="name">" 이 부분을 보시면 정답을 입력하는 칸을 만들어준 코드인데요. 이 부분에 name값을 지금 name으로 잡아 논 것을 확인하실 수 있습니다. 

 

아래 PHP코드를 보면서 더 자세히 알려드릴게요~

<!DOCTYPE html>
<html>
<meta charset="utf-8">
    <body>
    <?php
	$name = $_GET["name"];
	if($name == "정답"){
		echo ("<script>location.href='../sucess/sucess.html';</script>");
	} else {
		echo ("<script>alert('다시 생각해봐!!');</script>");
		echo ("<script>location.href='../first/first.html';</script>");
	}
	?>
    </body>
</html>

위 코드를 하나씩 보면서 설명해드리겠습니다~

 

$name = $_GET["name"];

name변수에 GET함수를 이용해서 입력받은 정답을 name변수에 대입을 시켜주는 코드입니다.

쉽게 설명해서 name이라는 상자에 정답을 적은 종이를 넣는다고 생각하시면 편해요!! 

그 넣어주는 과정을 GET함수가 해주는 거라고 생각하시면 좀 더 쉽게 이해하시기 편하실 겁니다!!

 

if($name == "정답"){
		echo ("<script>location.href='../sucess/sucess.html';</script>");
	}

"정답"이라는 부분에 자신이 생각하는 정답을 입력해주시면 됩니다!!

그러면 name이라는 변수에 저장되어 있는 답변이 정답과 일치하다면 정답처리가 되는 것입니다. 

 

정답 처리가 되었을 때 성공했다는 화면이 뜨는 이동 코드는 javascript 코드를 이용해 주었습니다. 

위 코드 처럼 <script></script>를 추가해주면 PHP에서도 script를 사용하실 수 있습니다. 

 

else {
		echo ("<script>alert('다시 생각해봐!!');</script>");
		echo ("<script>location.href='../first/first.html';</script>");
	}

이 부분은 정답이 부분이 오답처리가 되었을 때 경우입니다.

alert함수를 이용해서 오답 메세지를 출력한 후 문제화면로 다시 돌아가게 설정되어 있는 것을 알 수 있습니다. 

오늘은 퀴즈 화면 구성과 PHP를 이용해서 기능을 구현하는 시간을 가졌습니다.

앞으로 장에서도 구성하는 HTML은 비슷하기 때문에 기능을 구현하는 방법에 대해서 좀 더 자세하게 다루도록 하겠습니다. 

 

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

* 더 좋은 방법이나 자신의 의견을 남겨주셔도 감사합니다!

반응형

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

(next) 인스타 게시물 내 사이트에서 확인하기(1)  (3) 2024.03.15
퀴즈 정답 화면 제작하기 ( 사이트 제작 5 )  (0) 2021.01.22
Home 화면 제작하기 ( 사이즈 제작 3 )  (4) 2021.01.09
로그인 페이지 기능 구현 ( 사이트 제작 2)  (3) 2021.01.07
로그인 사이트 제작 ( 사이트 제작 1 )  (6) 2021.01.05
'사이트제작/사이트제작 공부하기' Related Articles more