사회 퀴즈 앱: 리뷰 업데이트

검토 후 변경 사항

https://social-studies-trivia-phase-1-project.glitch.me/src/
업데이트된 앱 호스팅입니다. 퀴즈에 도전해보세요!

이전 레이아웃

이전 레이아웃에서는 질문 및 답변 컨테이너가 로드 시 빈 상자로 표시되어 표시되었습니다. 답변 상자는 여전히 클릭할 수 있어 정답이 표시되고 질문을 가져오지 않은 경우에도 추가 정보 버튼이 열립니다. 검토 과정에서 앱이 "객관식"이라는 텍스트와 질문/답변 컨테이너를 제거할 수 있을 정도로 직관적이라고 판단했습니다. 여기에는 몇 가지 추가 단계와 변경 사항이 포함되어 있으며 아래에 표시된 대로 해결되었습니다.

새 레이아웃

로드 시 앱의 새 열기 레이아웃입니다. 처음부터 볼 수 있는 컨테이너 대신 "Pick A Category"라는 텍스트가 사용 가능한 4개의 카테고리 위에 표시되어 사용자가 카테고리를 선택한 다음 컨테이너를 생성하고 가져오기 데이터로 채우도록 합니다. 로드 시 기본 질문이 없기 때문에 인터페이스가 좀 더 깔끔해 보입니다.

코드 변경

첫 번째 변경 사항은 HTML 파일에 대한 것이었습니다. index.html에서 질문/답변 컨테이너에 대한 전체 블록이 제거되고 대신 내 JS의 함수에 삽입됩니다.

function questionTemplate(){
    const questionContainer = document.createElement("div")
    const main = document.getElementsByTagName("main")
   if(!document.getElementById("question")){questionContainer.innerHTML = ` <div class="question-container" id="question">
    </div>
     <div style="display: flex" class="answer-container">
     <br>
         <button type="button" class="option" id="answer-text1"></button>
     </div>  
     <div style="display: flex" class="answer-container">
         <button type="button" class="option" id="answer-text2"></button>
     </div>
     <div style="display: flex" class="answer-container">
         <button type="button" class="option" id="answer-text3"></button>
     </div>
     <div style="display: flex" class="answer-container">
         <button type="button" class="option" id="answer-text4"></button>
     </div>
     <br>
     <div class="result-container">
         <p id="result">-</p>
         <p hidden id="correct-answer"></p>
         <br>
         <button onclick="getInfo()" type="button" id="more-info">More Information</button>
     </div>`

이렇게 하면 요소가 생성되지만 여전히 DOM에 추가해야 합니다. 처음에는 appendChild를 사용하여 오류가 발생했습니다. 그 이유는 DOM 요소가 아닌 NodeList에서 appendChild를 사용했기 때문이라는 것을 알게 되었습니다. 통과시키려면 다음이 필요했습니다.main[0].appendChild(questionContainer); 이는 appendChild가 적절하게 호출될 수 있도록 합니다. 이것은 appendChild를 호출할 수 있는 DOM 요소인 NodeList의 index[0]에 있는 요소에 액세스합니다.

함수는 호출될 때 컨테이너를 만들지만 기본 상태에서는 범주가 선택될 때 항상 컨테이너 div를 만듭니다. 이것은 if 문과 ! 논리 NOT 연산자. 이렇게 하면 컨테이너가 아직 만들어지지 않은 경우에만 생성됩니다. 이렇게 하면 새 요소를 만들지 않고도 후속 호출을 수행할 수 있습니다. getQuestion 함수에서 첫 번째 호출이 이루어지면 템플릿이 만들어지고 채워지고 이후의 각 호출은 동일한 컨테이너를 다시 채웁니다. 클릭 시 템플릿이 생성되는 것을 방지하기 위해 카테고리 버튼에 대한 이벤트 리스너 내부에서 getTemplate이 호출됩니다.

다음 단계로

이 작업이 완료되면 Phase-2로 이동하고 React 작업을 시작할 것입니다. 프로젝트로 돌아오는 첫 번째 게시물에서 언급했고 여가 시간에 React 버전 작업을 해야 할 수도 있습니다.