2017-10-17 11 views
1

Watson 대화 프로젝트에서 작업하고 있습니다. 나는 다음 왓슨 프로젝트를 가져 와서 내 대화로를 구성하고 있습니다 : https://github.com/watson-developer-cloud/car-dashboardWatson 대화 대화 상자로 양식 작성 도구를 만드는 방법

나는 사용자에게 사용자가 선택할 수있다 (7) 옵션이있는 체크 박스를 표시하도록 chatbot을하고 싶습니다. 한 옵션의 각 클릭은 대화 상자의 일부와 연결됩니다. 순간 , 나는 대화 노드

"Select:<br> 
 
<select id='select' on select: 'select()'> 
 
<option value='01' selected> Product 1 </option> 
 
<option value='02'>Product 2</option> 
 
</select>" \t

에이 텍스트를 삽입 한 내가 다음과 같은 상황이이 글을 따라하려고

image

(How use Select Option in Watson Conversation) 내 프로젝트에없는 index.js 파일 안에 코드를 복사했습니다.

질문은 두 가지입니다 : 1) 드롭 다운 메뉴가 아닌 체크 박스를 어떻게 가질 수 있습니까? 2) 프로젝트의 github 페이지에서 볼 수있는 계층 구조의 파일에 제안 된 코드를 입력하십시오.

답변

0

1) input type checkbox을 사용하면 체크 박스가 생깁니다.

2) 페이지가 아닌 대화 상자 노드에 코드를 입력해야합니다. 이 페이지는 서비스의 응답을 브라우저에서 HTML로 렌더링합니다.

1

@Arlemi가 지적했듯이 링크에 언급 된 체크 박스 코드 만 사용할 수 있습니다.

그러나! 당신이하려고하는 것에 대한 문제점은 당신이 다른 시스템을 위해 렌더링하려고한다면, 유지하는 것이 악몽이 될 것입니다.

또한 대화 코드에 10MB 제한이 있으므로 관계없는 코드를 추가하면 제한이 줄어 듭니다.

코드를 분리하여 응용 프로그램 계층에 코드 생성을 맡기는 것이 좋습니다.

<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> 
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br> 
<input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br> 

당신은 다음과 같은 대화 상자 노드를 할 것이다 다음 W3 학교를 사용하여 예를 들어

는 코드를 연결합니다.

{ "context": { 
    "vehicle_options": { 
    "type": "checkbox", 
     "options": [ 
     { "name": "vehicle1", "value": "Bike", "text": "I have a bike" }, 
     { "name": "vehicle2", "value": "Car", "text": "I have a car" }, 
     { "name": "vehicle3", "value": "Boat", "text": "I have a boat", "checked": true }, 
     ] 
    } 
    }, 
    "output": { 
     "text": { 
     "values": [ "Select your Vehicles: <! vehicle_options !>" ] 
     } 
    } 
} 

귀하의 응용 프로그램 계층은 <! !>을 찾고 읽을 어떤 컨텍스트 개체를 확인하려면이 블록 내부의 값을 사용합니다. 렌더링 방법을 결정하기 위해 type 값을 사용하고 해당 렌더링의 일부로 options을 사용합니다.

이것은 응용 프로그램 계층이 HTML이나 다른 언어 (예 : Swift)를 만들 수 있음을 의미합니다. 또한 다른 곳에서 스타일을 제어 할 수 있으며 대화 응답을 변경할 필요가 없음을 의미합니다. 또한 노이즈를 줄여 유지/읽기가 더 쉽습니다.