심리 테스트를 직접 코딩으로 만들어 보면 어떨까 하는 주변 사람의 의견이 있어서 한 번 도전해 보았습니다. 이번 포스팅은 간단한 프리뷰 정도로 생각해 주세요.
목차
컨셉
케릭터나 배경을 디자인 할 능력이 없으므로 최대한 심플한 컨셉으로 가보겠습니다.
필요 스킬
기본적인 웹 언어(HTML, CSS, JavaScript)와 자바스크립트 라이브러리(또는 프레임워크)인 jQuery, Vue 등을 사전에 알고 있으시면 더욱 수월하게 진행하실 수 있습니다.
완성 후 동작 화면
시작부터 심플 합니다.
인트로 부분도 심플 합니다.
테스트 질문, 답변 부분도 심플 합니다.
결과 화면 마저 심플 합니다.
모든 게 심플합니다.
데모(Demo)
아래 화면에서 시작하기를 누르면 실제로 동작합니다.
소리를 켜보세요. 인트로 부분의 거센 빗소리가 몰입감을 높입니다.
민이 심리 테스트 - 중국 음식
중국 음식을 통한 심리 테스트입니다 (소름 주의)
sangminem-psytest.web.app
+내용추가(2021.02.09) 질문 개수 여러개, 단답형 심리 테스트 샘플입니다.
민이 심리 테스트 - 내 심리 상태
소름돋는 현재 심리상태를 확인하는 테스트입니다
sangminem-psytest.web.app
기대되지 않나요? ㅎㅎ
기다려 주세요~ 곧 시작됩니다!
Coming Soon..
웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성
웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성
기다리고 기다리던 심리 테스트 만들기 강좌를 시작하겠습니다. 웹 언어 코딩으로 심리 테스트 만들기 #0 웹 언어 코딩으로 심리 테스트 만들기 #0 심리 테스트를 직접 코딩으로 만들어 보면 어
sangminem.tistory.com
'코딩 강의 > 컨텐츠를 만들어 볼까요' 카테고리의 다른 글
| 웹 언어 코딩으로 심리 테스트 만들기 #4 데이터 입력 (4) | 2021.02.09 |
|---|---|
| 웹 언어 코딩으로 심리 테스트 만들기 #3 화면 전환 기능 구현 (2) | 2021.01.22 |
| 웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성 (3) | 2021.01.13 |
| 웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성 (10) | 2021.01.10 |
| 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 (10) | 2021.01.09 |
| 테트리스 게임 개발 #10 - 모바일 플레이 기능 구현 (2) | 2020.10.01 |
| 테트리스 게임 개발 #9 - 콤보 기능 및 라인 한 줄 씩 추가 (0) | 2020.10.01 |
| 테트리스 게임 개발 #8 - 보드 및 블럭 스타일 추가 (1) | 2020.09.28 |
| 테트리스 게임 개발 #7 - 최고 점수 표시, 블럭 색깔 추가, 배경음악 및 효과음 적용 (0) | 2020.09.24 |
오 ㅎㅎㅎ 대단해요 ~! ^^
답글
ㅎㅎ 재밌겠는데요?
혹시 뭐좀 여쭤봐도 될까요? json을 통해 주어지는 데이터를 티스토리의 스킨 혹은 포스팅을 할 때 자바스크립트를 통해 보여줄 수 있는 방법이 있을까요?
답글
안녕하세요~
어떤걸 어떻게 하고싶다고 말씀해 주셔야 더 정확한 답변을 드릴 수 있을 것 같은데 어쨌든 간략하게 말씀을 드리자면,
자바스크립트에서 JSON.parse를 통해 json 스트링을 파싱할 수 있구요.
그걸 통해 생성된 JSON 오브젝트를 원하시는 대로 활용할 수 있습니다.
스킨과 포스팅 시 모두 자바스크립트를 지원하기 때문에 자바스크립트 문법만 조금 아신다면 충분히 가능해 보입니다.
예를들어.. 아래 주소로 접속하면 Json 형식의 데이터로 홍콩 기상청에서 발표한 9일간의 일기예보의 정보를 가져올 수 있습니다.
https://data.weather.gov.hk/weatherAPI/opendata/weather.php?dataType=fnd&lang=en
이 정보를 제 웹사이트의 포스팅 안에서 혹은 스킨의 사이드메뉴에서 보여주려면 자바스크립트로 어떻게 구현할 수 있나요?
네~ 데이터를 가져오는 것은 당연히 가능합니다.
$.getJSON('https://data.weather.gov.hk/weatherAPI/opendata/weather.php?dataType=fnd&lang=en', function(data) {console.log(data)});
와 같은 형태로 가져올 수 있으며 data 부분이 이미 JSON 오브젝트이므로 콜백 함수 안에서 필요한 내용을 기술하시면 됩니다.
그런데 포스팅이나 스킨에서 보여주려면 기본적인 프로그래밍이 가능해야 하는 문제라서 댓글에서 간단히 얘기하기는 어려워 보입니다.
답글 달아 주셔서 감사합니다. 친절하시네요.
제가 2000년대 초에 웹사이트 디자인과 웹 프로그래밍을 몇년간 했던 적이 있습니다. 지금은 시간이 많이 흘러서 잘 기억이 안나지만 알려주신 내용을 토대로 공부를 좀 해보려고요. 이곳에 댓글을 도배해서 죄송해요!
아 프로그래밍 경험이 있으시군요!
그럼 관련 사항 조금만 찾아보시면 충분히 하실 수 있을 것 같습니다 ㅎㅎ
결과를 보고 놀랬습니다 ㅎㅎㅎㅎㅎ
답글
기다리던 컨텐츠 입니다~! 저는 완전 초보인데 마침 한번 만들어보고 싶었습니다.ㅎㅎ 올려주시는 글 열심히 보겠습니다~
답글
관심 가져 주셔서 감사합니다 ㅎㅎ
기대에 부응하도록 노력해야 겠네요!