[MYNAVI 개발 과정-1] 나는 암송 테스트 기능 구현 중

본인이 암송을 완벽하게 했는 지 확인하기 위해서 테스트 할 수 있는 기능을 추가로 구현할 예정.

- 제시된 구절과 사용자가 입력한 구절을 비교한다.

- 맞다면 정답.

- 틀릴 경우 어느 부분이 틀렸는지 빨간색으로 표시할 예정

1. 우선 ajax 부터 구현

<input type="text" name="content">

<button type="submit" class="content_submit">클릭</button>

<!--

form 태그는 빼야합니다. 

기본적으로 form 태그가 있으면 refresh가 한 번 발생하기 때문!

-->

<script>

$('.content_submit').click(function(){

  $.ajax({

    method: "POST",

    url: "/home/checker", //form 태그의 액션 주소에 해당하는 부분

    data: { content: "리플입니다."} //parameter 값 전달

  })

    .done(function() {

      alert( "Data Saved:");

    });

});

</script>

2. 모델에 사용자가 입력 한 정답을 저장

  def mytest

    @content=Answer.all

  end

3. jquery append를 사용하여 새로고침 없이 반영되도록 수정

4. 문제가 랜덤으로 출제되도록 변경

offset 랜덤 숫자를 생성하여 해당되는 값의 레코드를 모델에서 출력함.

  def mytest

    offset = rand(Verse.where(:group=>0).count)

    @random_verse=Verse.where(:group => 0).offset(offset).first

    @content=Answer.last

  end

5. 문자열 비교를 위해 정규식 적용

  var re = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\(\=]/gi;

  

  question=question.replace(/\s/g,'');

  content=content.replace(/\s/g,'');

  content=content.replace(re, "");

6. input text에 사용자가 정답을 입력하면 

정답과 비교해 틀린 부분 char에만 빨간 색으로 표시를 하고 싶은데

구글링 해 본 결과 input box내의 text css는 바꿀 수 없다는 것 같다 ㅜㅜ