quiz 유형 사이트 만들기 - 03

퀴즈퀴즈 사이트 만들기 

안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 

정답일경우엔 강아지가 웃고

오답일경우엔  강아지가 슬퍼해요 

정답은 '주파수, unix, 교착상태'입니다 ! 

 소스는 요기 

 

😝😝😝 위 레이아웃 만들면서 어려운 javascript 정리
innerHTML	textContent, innerText 과 같은동작을 하지만 style tag를 쓸수 있어요 (quizQuestion.innerHTML= "<em>"+quizInfo[0].infoNumber+"</em>)
array.forEach (element, number =>{  });	forEach문 반환하는 값이 있는 함수에요  array순서대로 반환하며 element(array[0]번째부터 끝까지 반복) number(array[0]번째 부터 끝까지 반복하며 배열의순서를 반환해요=> ex 0, 1,2)

핵심요소 ! 

<script>
    const quizInfo =[
        {
            infoType:"정보처리 기능사",
            infoTime:"2011년 4회",
            infoNumber:"1",
            infoQuestion: "각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것은? ",
            infoAnswer: "주파수",
            infoDesc: "채널간의 간섭을 방지하기 위해 설정하는 것을 가드밴드(보호구역)라 합니다."
        },{
            infoType:"정보처리 기능사",
            infoTime:"2011년 4회",
            infoNumber:"2",
            infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제는?",
            infoAnswer: "unix",
            infoDesc: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다"
        },{
            infoType:"정보처리 기능사",
            infoTime:"2011년 4회",
            infoNumber:"3",
            infoQuestion: "서로 다른 프로세스가 일어날수 없는 사건을 무한정 기다리고 있는 것은?",
            infoAnswer: "교착상태",
            infoDesc: "교착상태(Deadlock) :2개 이상의 프로세스들이 차지하고 있는 자원을 무한정 기다려 시스템이! "
        }
    ];

    quizInfo.forEach((el, i)=>{
        quizTitle[i].innerHTML =quizInfo[i].infoType+" "+quizInfo[i].infoTime;
        quizQuestion[i].textContent = el.infoQuestion;
        quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
        quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
        quizDesc[i].textContent = quizInfo[i].infoDesc;
    });

    //딱봐도 quizInfo에 있는 값을 각각의 요소에 
    //textContent나 innerHTML을 이용해서 넣는걸알수있어요 ! 
    //forEach문을 이용해서 el = 반복된순서에 들고있는값  , i = 순서 key를 들구 있어요
</script>

forEach문을 정확히 알고가요! 

<script>
    quizChoice.forEach(function(el, i) {
        //for문으로 할때 쓰는법 & i값으로 quizChoice[i]에 값을 할당해줘요
        quizChoice[i].textContent= quizInfo[0].infoChoice[i];   

        //forEach문의 반환값을 이용해서 쓰는법 el = quizChoice[i]과 같은 요소에요 
        //el로 적어서 반복되는동안 값을 넣어줘요 !
        el.textContent= quizInfo[0].infoChoice[i];              
    });
</script>