클로즈 테스트라는 것이있는 것 같습니다.

오라일리에서 나온다.

간단히 설명하면 일정 간격으로 구멍이 열린 상태의 텍스트를 읽고, 사용자가 문장의 의미를 훔칠 수 있는지를 확인하기 위한 테스트입니다.
어느 정도의 단어가 숨겨진 상태에서도 전해지는 문장을 쓸 수 있을까요?

자세한 것은 이쪽
인터페이스 디자인 실습 교실

구현해 보자.

먼저 올린 책 안에서 번역자가 일본어로 UI 용도의 이용 예를 찾을 수 없다고 써 있었으므로 조속히 실장해 보았습니다.
또, 얼마 전부터 Testing Content · An A List Apart Article 라고 하는데 임하고 있는 중이었으므로, kuromoji.js 라고 하는 라이브러리를 사용해 JavaScript로의 구현을 실시했습니다.

kuromoji.js 정보

사용하기 쉬운 Pure JavaScript 형태소 분석기
자바스크립트에서 언어 처리 100개 노크 2015

라는 것입니다. 굉장하다.
조속히 사용해 보겠습니다.

데모

테스트 브라우저에서 자연 언어 처리 - JavaScript 형태소 분석기 kuromoji.js를 만들었습니다. 됩니다.
사전 파일이 16MB 정도 있고 읽을 때까지 약간의 시간이 걸립니다.

데모 페이지

소스는 이런 느낌

main.js

/**
クローズテスト用 kuromojiを継承
* @class closeTest
* @method init 初期化 パラメータのセット
* @method setProblem 空白の問題文を生成
* @method check 正解率のチェック
* @property {has} data 文章データ kuromoji.jsで形態素解析済み
* @property {number} oneset oneset毎に文字を隠す
* @property {string} targetElement jqueryに渡すdomエレメント
* @property {string} DIC_URL 辞書ファイルのパス
*/
var closeTest = function(){
  this.data = {
    planText:"",
    tokenize:{}
  };
  this.oneset;
  this.targetElement;
  this.DIC_URL = "bower_components/kuromoji/dist/dict/";
  this.tokenizer;
  this.init = function(_planText,_oneset,_targetElement){
    this.data.planText = _planText;
    this.oneset = _oneset || 5;
    this.targetElement = $(_targetElement);
  }
  this.setProblem = function(){
    this.targetElement.html("");
    this.data.tokenize = this.tokenizer.tokenize(this.data.planText);
    var _wrap = $('<div>').addClass('problem');
    var k = 1;
    for (var j = 0; j < this.data.tokenize.length; j++) {
      if(k % this.oneset == 0 && this.data.tokenize[j].pos != "記号"){
        var _inputprop = {
          type:"text",
          "data-surface":this.data.tokenize[j].surface_form
        }
        _wrap.append($('<input>').attr(_inputprop).addClass('surface'));
        this.targetElement.append(_wrap);
        k++;
      }else{
        _wrap.append($('<span>').html(this.data.tokenize[j].surface_form));
        this.targetElement.append(_wrap);
        if(this.data.tokenize[j].pos != "記号"){
          k++;
        }
      }
    }
  }
  this.check = function(){
    var _problem = $('.problem input');
    var _score = 0;
    _problem.each(function(){
      if($(this).val() == $(this).attr("data-surface")){
        _score++;
      }
    });
    return Math.round(_score/$('.problem input').length*100);
  }
}
closeTest.prototype = kuromoji;


$(function(){
  var _text = $('.testWording textarea').val();
  var closetest = new closeTest();
  closetest.init(_text,6,'.closeTest');
  closetest
    .builder({dicPath:closetest.DIC_URL})
    .build(function (error, tokenizer) {
      closetest.tokenizer = tokenizer;
      closetest.setProblem();
    });

  //チェックボタンの挙動
  $('.btnWrap').on('click','.btn.active.set',function(){
    closetest.data.planText = $('.testWording textarea').val();
    closetest.setProblem();
  });
});

※ 알기 쉽게 하기 위해서 원래의 소스로부터 jquery로의 UI 조작 주위를 깎은 상태입니다.

kuromoji.js를 사용하는 방법은 여기입니까?
여기만 보면 알기 힘듭니다만 closetest 는 kuromoji 를 계승한 클래스입니다.

closetest
    .builder({dicPath:closetest.DIC_URL})
    .build(function (error, tokenizer) {
      closetest.tokenizer = tokenizer;
      closetest.setProblem();
    });

builder().build() 에서 준비가 된 후 콜백으로 처리하고 있습니다.kuromoji 로 해석한 결과는, 한 단어에 대해서 이런 느낌의 키 배열로 돌아옵니다.

{
  basic_form:"吾輩",
  conjugated_for:"*",
  conjugated_type:"*",
  pos:"名詞",
  pos_detail_1:"代名詞",
  pos_detail_2:"一般",
  pos_detail_3:"*",
  pronunciation:"ワガハイ",
  reading:"ワガハイ",
  surface_form:"吾輩",
  word_id:957200,
  word_position:1,
  word_type:"KNOWN"
}

조금도 어려운 일 없이 구현할 수 있었습니다.

요약

kuromoji.js가 굉장합니다.

그리고 스스로 쓴 문장에서도, 흘려 넣어 테스트를 해 보면 상당히 이해할 수 없는 상황이 됩니다.
이해하기 쉬운 문장을 작성하는 데 유용한 테스트라고 생각했습니다.

그리고 몇 단어 마다 깎는지 라든지 고유명사의 경우는 공백으로 하지 않는다든가, 좀 더 생각하면 테스트의 정밀도가 오를 것 같네요.
그 중 고쳐 보겠습니다.

소스는 에도 있습니다.