코딩 강의/컨텐츠를 만들어 볼까요

웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰

변태 개발자 아미넴 2021. 1. 9.

심리 테스트를 직접 코딩으로 만들어 보면 어떨까 하는 주변 사람의 의견이 있어서 한 번 도전해 보았습니다. 이번 포스팅은 간단한 프리뷰 정도로 생각해 주세요.

 

목차

     

    컨셉

    케릭터나 배경을 디자인 할 능력이 없으므로 최대한 심플한 컨셉으로 가보겠습니다.

     

     

    필요 스킬

    기본적인 웹 언어(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

     

    BIG

    댓글10

    • teum♡ 2021.01.09 19:10 신고

      오 ㅎㅎㅎ 대단해요 ~! ^^
      답글

    • KEI.hk 2021.01.09 21:00 신고

      ㅎㅎ 재밌겠는데요?

      혹시 뭐좀 여쭤봐도 될까요? json을 통해 주어지는 데이터를 티스토리의 스킨 혹은 포스팅을 할 때 자바스크립트를 통해 보여줄 수 있는 방법이 있을까요?
      답글

      • 안녕하세요~
        어떤걸 어떻게 하고싶다고 말씀해 주셔야 더 정확한 답변을 드릴 수 있을 것 같은데 어쨌든 간략하게 말씀을 드리자면,
        자바스크립트에서 JSON.parse를 통해 json 스트링을 파싱할 수 있구요.
        그걸 통해 생성된 JSON 오브젝트를 원하시는 대로 활용할 수 있습니다.
        스킨과 포스팅 시 모두 자바스크립트를 지원하기 때문에 자바스크립트 문법만 조금 아신다면 충분히 가능해 보입니다.

      • KEI.hk 2021.01.10 18:57 신고

        예를들어.. 아래 주소로 접속하면 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 오브젝트이므로 콜백 함수 안에서 필요한 내용을 기술하시면 됩니다.
        그런데 포스팅이나 스킨에서 보여주려면 기본적인 프로그래밍이 가능해야 하는 문제라서 댓글에서 간단히 얘기하기는 어려워 보입니다.

      • KEI.hk 2021.01.10 20:16 신고

        답글 달아 주셔서 감사합니다. 친절하시네요.

        제가 2000년대 초에 웹사이트 디자인과 웹 프로그래밍을 몇년간 했던 적이 있습니다. 지금은 시간이 많이 흘러서 잘 기억이 안나지만 알려주신 내용을 토대로 공부를 좀 해보려고요. 이곳에 댓글을 도배해서 죄송해요!

      • 아 프로그래밍 경험이 있으시군요!
        그럼 관련 사항 조금만 찾아보시면 충분히 하실 수 있을 것 같습니다 ㅎㅎ

    • 도쿄정대리 2021.01.10 18:25 신고

      결과를 보고 놀랬습니다 ㅎㅎㅎㅎㅎ
      답글

    • 다있어 2021.01.18 11:16

      기다리던 컨텐츠 입니다~! 저는 완전 초보인데 마침 한번 만들어보고 싶었습니다.ㅎㅎ 올려주시는 글 열심히 보겠습니다~
      답글

    💲 추천 글