주석
K-MOOC은 이 문제 유형에 대해 전체 지원을 제공한다.
사용자 지정 JavaScript표시 및 채점 문제(사용자 지정 JavaScript 문제 또는 JS 입력 문제 라고도 함)는 JavaScript를 사용하는 사용자 지정 문제 또는 도구를 만들고, Studio에 직접 문제 또는 도구를 추가할 수 있도록 한다. JS 입력 문제를 만들 때, Studio는 학습자가 LMS에서 문제와 상호 작용할 수 있도록 내부프레임(Iframe) 문제를 지정한다. JavaScript와 몇 가지 기본적인 Python을 사용하여 학습자의 활동을 채점하고, 채점 결과는 K-MOOC 채점 시스템에 합쳐진다.
생성한 JS 입력 문제는 HTML, JavaScript, cascading style sheets (CSS)를 사용해야 한다. JS 입력 문제를 만들기 위해 구글 웹 툴킷 (GWT) 등과 같은 모든 응용 프로그램 제작 도구를 사용할 수 있다.
조심
주석
모든 학습활동 페이지에 계산기를 추가할 수 있다. 자세한 사항은 계산기 도구(신규 기능) 를 참고하면 된다.
JavaScript 응용 프로그램을 만들고 난 다음, JavaScript 응용 프로그램과 관련된 모든 파일을 파일 업로드 페이지로 업로드한다.
문제를 만들려는 학습활동에서, 신규 구성요소 추가 아래 문제 를 클릭하고 난 다음, 고급 탭을 클릭한다.
사용자 정의 Jacascript문제 를 클릭한다.
표시되는 구성요소에서, 편집 을 클릭한다.
구성요소 편집기에서, 문제에 따라 예제 코드를 수정한다.
모든 문제는 하나 이상의 요소(element)를 가져야 한다. 대부분의 문제는 동일 출처 정책 (same-origin policy, SOP)을 따르고 있으며, 모든 요소들이 동일한 프로토콜, 호스트, 포트를 가지고 있음을 의미한다. 예를 들어 http://store.company.com:81/subdirectory_1/JSInputElement.html
및 http://store.company.com:81/subdirectory_2/JSInputElement.js
는 동일한 프로토콜 (http), 호스트(store.company.com), 포트(81)를 가진다.
문제의 어떤 요소가 다른 프로토콜, 호스트, 또는 포트를 사용하는 경우 SOP를 무시해야 한다. 예를 들어 https://info.company.com/JSInputElement2.html
는 다른 프로토콜, 호스트, 포트를 사용한다. SOP를 무시하려면, 예제 코드의 8번째 줄에서 sop="false"
를 sop="true"
로 변경하도록 한다. 더 자세한 내용은 Mozilla Developer Network 또는 Wikipedia 에 있는 동일 출처 정책 페이지를 참조하도록 한다.
문제에 저장 버튼을 만들려면, 설정 탭을 클릭한 다음 최대 시도 수 를 0 보다 큰 수로 지정한다.
저장 을 클릭한다.
위의 예제 문제를 다시 만들려면 다음 파일이 필요하다.
- webGLDemo.html
- webGLDemo.js
- webGLDemo.css
- three.min.js
.zip 파일 저장소에서 위의 파일을 다운로드 하려면 http://files.edx.org/JSInput.zip 로 이동한다.
주석
SOP를 무시하려는 경우, jschannel.js
파일이 또한 필요하고, webGLDemo.html 파일은 약간 다를 것이다. .zip 파일 저장소에서 모든 파일을 다운로드 하려면 http://files.edx.org/JSInput_BypassSOP.zip 로 이동한다.
<problem display_name="webGLDemo">
In the image below, click the cone.
<script type="loncapa/python">
import json
def vglcfn(e, ans):
'''
par is a dictionary containing two keys, "answer" and "state"
The value of answer is the JSON string returned by getGrade
The value of state is the JSON string returned by getState
'''
par = json.loads(ans)
# We can use either the value of the answer key to grade
answer = json.loads(par["answer"])
return answer["cylinder"] and not answer["cube"]
# Or we can use the value of the state key
'''
state = json.loads(par["state"])
selectedObjects = state["selectedObjects"]
return selectedObjects["cylinder"] and not selectedObjects["cube"]
'''
</script>
<customresponse cfn="vglcfn">
<jsinput
gradefn="WebGLDemo.getGrade"
get_statefn="WebGLDemo.getState"
set_statefn="WebGLDemo.setState"
width="400"
height="400"
html_file="/static/webGLDemo.html"
/>
</customresponse>
</problem>
주석
문제를 만들 때 다음 사항을 기억해야 한다.
JSInput(입력)은 별개의 HTML 파일을 K-MOOC 플랫폼에 통합하여 문제로 쓸 수 있도록 한다. JSInput의 목표는 유연성(flexibility)이므로 입력과 CustomResponse(메타 데이터) 가 동일하게 운영된다.
JSInput 연습문제는 HTML 페이지에서 Iframe을 만들고, 지정된 함수의 반환 값을 둘러싸고 있는 응답 유형(대게 CustomResponse )에 전달한다. 또한 JSInput은 상태를 저장하고 불러올 수 있다.
다음은 JSInput 문제의 기본 양식이다.
<problem>
<script type="loncapa/python">
def all_true(exp, ans): return ans == "hi"
</script>
<customresponse cfn="all_true">
<jsinput gradefn="gradefn"
height="500"
get_statefn="getstate"
set_statefn="setstate"
html_file="/static/jsinput.html"/>
</customresponse>
</problem>
허용된 속성은:
html_file
html_file 속성은 Iframe이 가리키는 HTML파일을 지정한다. HTML 파일은 콘텐츠 디렉터리에 위치해야 한다.
IFrame은 sandbox (샌드박스) 속성을 이용하여 만들어진다. 팝업, 스크립트, 포인터 잠금이 허용될지라도, IFrame은 본 페이지에 (본 html문서에) 접근할 수 없다.
HTML 파일은 JSInput 파일이 접근할 수 있는 gradefn 함수를 포함해야 한다. Gradefn 함수가 콘솔에 접근할 수 있는지 여부를 확인하려면, gradefn 함수가 옳은 것을 반환하는지 확인해야 한다. JSInput이 gradefn 함수를 사용하는 경우, gradefn 는 obj 가 gradefn 의 개체 부분이 되는`gradefn`.call(obj)와 함께 호출된다. 예를 들어, gradefn 이 myprog.myfn 인 경우, JSInput은 myprog.myfun.call(myprog) 를 호출한다. (이는 ” 이것 “이 gradefn 이 참조할 것으로 기대되는 것을 계속 언급하도록 하기 위함이다.)
그 외에, 대체로 모든 것이 가능하다. 현재는 본 페이지로부터 (본 html문서로부터) CSS 또는 JavaScript를 지원하지 않는다. (기본적으로 True로 설정되어 있는, 크롬 전용 seamless 속성은 예외다.).
gradefn
gradefn 속성에는 이용자가 확인 을 클릭할 때 호출되는 함수명 및 학습자의 답안을 반환하는 함수의 이름을 지정한다. get_statefn 및 set_statefn 의 속성이 모두 사용되지 않는 한, 이 답안은 문자열로 둘러싸고 있는 응답 유형에 전달된다. 위의 customresponse 예에서, cfn 이 이 함수에 대한 답을 ans
로써 전달할 것임을 의미한다.
학습자가 문제를 제출하려고 할 때 gradefn 함수가 예외를 보내는 경우, 제출은 중단되고, 학습자는 일반적인 경고를 받는다. 경고는 예외 이름을 Waitfor Exception
로 만들어 사용자 지정될 수 있다; 이 경우 경고 메시지는 예외 메시지가 될 것이다
중요
학습자가 마지막으로 제출한 답안이 제대로 전달되었는지 확인하려면 gradefn 함수가 동기화 되어 있는지 확인해야 한다. 또한, 함수가 즉시 반환하는지도 확인하도록 한다. 현재 학습자는 답안이 계산되거나 만들어지고 있는지 아무런 안내를 받지 못하기 때문이다.
set_statefn
간혹 학습자는 이전 답변 (“상태”)에 관한 정보가 저장되고 다시 불러오기를 원할 것이다. set_statefn 속성을 사용하는 경우 값으로 주어진 함수는 상태가 있을 때마다 문자열 인수로 상태가 전달될 것이며, 학습자는 문제로 돌아가게 된다. 함수는 이 상태를 적절히 사용할 책임이 있다.
전달 되는 상태는
set_statefn 를 통해 받는 인수의 적절한 검증을 하는 것은 iframe의 책임이다.
get_statefn
간혹 상태 및 답안은 매우 다르다. 예를 들어, 학습자에게 분자를 변경하도록 하는, javascript 프로그램을 사용하도록 하는 문제는 분자의 소수성(물과 결합하지 않으려는 성질)을 기반으로 채점될 것이지만, 소수성으로부터 상태 복원은 불가능할 것이다. 이 경우, 별도 상태 는 set_statefn 에 의해 저장되고 불러올 수 있다. 만일 get_statefn 이 정의되면, 답안 (즉, 응답 유형인 것)은 다음과 같은 형식을 지니는 json 문자열이 될 것이다.
{
answer: `[answer string]`
state: `[state string]`
}
둘러싸고 있는 응답 유형은 이 말을 json으로 분석 해야 한다.
height 및 width
height 및 width 속성은 간단하다: IFrame의 너비와 높이를 지정하는 것이다. 둘 다 DOM (enclosing DOM) 요소에 의해 제한된다. 예를 들어 약 900정도의 최대 폭이 있다.
추후 JSInput은 치수가 HTML 파일의 치수와 (앞서 언급한 한도까지) 일치하도록 해볼 수 있지만, 현재는 height 와 width 에 대해 각 500 및 400 으로 기본 설정 되어 있다.