금융단어암기장[QUIZ기능추가(2) : 정답 체크 기능]

5개의 li tag중 하나를 선택하면 wrong or true 반환

[이전 계획 수정내용]

1. 우선은 기능구현을 위주로 확인하기 위해서 크롤링시 데이터 meaning부분에서 name제거하는 것은 구현하지 않음

=> 대체 : 아직 데이터가 적으니 xml파일에서 직접 제거해줌.

2. model에 저장된 pk값을 비교하지않고 사용자가 고른 단어의 name과 정답의 name을 비교해도 충분하기에 pk값은 고려하지 않음

=> 대체 : name비교

3. form을 만들어 사용자의 답변 처리를 view.py에서

=> 대체 : javascript의 Eventlistner를 사용해서 5개의 단어중 사용자의 click을 바로 처리해줌.

 

[구현내용]

 

1. class를 생성해서 기존의 WORD model에서 사용자가 암기하고 있던 단어 5개와 퀴즈로 사용할 5개중 1개의 단어를 저장해준다!

class QUIZ(models.Model):
    question = models.CharField(max_length=200, verbose_name="퀴즈")
    one = models.CharField(max_length=30, verbose_name="보기1")
    two = models.CharField(max_length=30, verbose_name="보기2")
    three = models.CharField(max_length=30, verbose_name="보기3")
    four = models.CharField(max_length=30, verbose_name="보기4")
    five = models.CharField(max_length=30, verbose_name="보기5")
    answer = models.CharField(max_length=30, verbose_name = "정답")

    class Meta:
        db_table = "QUIZ_board"

=> 하나의 문제는 질문, 5개의 선택지, 정답을 가지고 있기에 QUIZ라는 모델을 다음고 같이 작성하였다.

 

+ 이때, 처음에는 one~five를 list로 처리하고 싶었는데 django의 field값엔 list를 다룰 수 있는것이 존재하지 않아서 우선 다음과 같이 작성하였다. ( json을 활용하려고도 시도해봤지만 quiz모델 자체를 객체로 받아서 전체적으로 json으로 html파일로 넘겨줄것이기에 두번적용하게 돼서 우선 이것도 skip,,,!)

 

이후, Django에서의 모델 변경사항 적용을 위해 다음과 같은 명령어를 적용

 

1. python manage.py makemigrations

2. python managepy migrate word

 

2. view.py를 작성하여 데이터 저장 및 처리를 하고 이후 model의 data를 json으로 변경하여 넘겨준다.

 

def quiz(request):

    if request.method == "POST":

       
        word = WORD
        print(type(word))
        all_word_board = word.objects.all()
        word_board = all_word_board.order_by('-id')[:5]

        list=[]
        for i in range(0,5):
            list.append(word_board[i].name)
        
        quiz_word = QUIZ
        for i in range(0,len(list)):
            quiz_word(question = word_board[i].meaning , one = list[0], two = list[1], three = list[2], four = list[3], five=list[4], answer = word_board[i].name).save()


        quiz_data =quiz_word.objects.all()

        if quiz_data:
            quiz_board = quiz_data.order_by('-id')[:1]

            res_data={
            "random_choice": quiz_board,
            "random_js": serializers.serialize('json',quiz_board),
            }

            return render(request, 'word/quiz.html',res_data)
        else:
            print("no data")
            return redirect('/word/list')

        
    else:
        return redirect('/word/list')

=> javascript에서 log를 찍어서 형태를 확인해보자!

fields에 다음과 같이 저장되어있는 것을 확인할 수 있다!

 

3. quiz.html에서 script code를 작성해준다!

element.addEventListener('click',function(){
                //check correct answer
                console.log("here");
                console.log(choice);
                if(q.answer == choice)
                {
                    console.log('correct!');
                }
                else{
                    console.log('wrong!');
                }
            });

다음을 fuction showQuestion( )의 기능에 넣어주어 정답 여부를 가리는 기능을 추가하였다!

집단대출일때만 correct! 출력

 

 

---

[나머지 기능 계획]

1. pagenation을 통한 5개의 단어를 모두 문제로 구현하기

2. 점수 체크하기