Javascript/jQueryの照会/応答、はい/いいえインターフェイス

Question

私はjavascript/jquery noobのように、StackOverflowコミュニティのnoobです。私は、SMSテキストメッセージに似たチャットインターフェイスをまとめようとしています。私は現在、ユーザーがテキスト入力を入力できるようにしており、指定されたキーワード（Yes/No）をjavascriptで調べ、HTMLを特定の隠しdivで表示してレスポンスをシミュレートします。

私はかなり遠くにいるCodePenの例（https://codepen.io/adobewordpress/pen/wGGMaV）を活用しようとしています。しかし、私はまた、複数の質問に対してユーザーが「はい」と答えると、JavaScriptがFIRST Yes/Noレスポンスを提供している、ユーザーからのYes/Noの重複回答を探しています。

私は自分の質問を包んで質問ごとに特定のユーザー入力回答を探す方法が必要です。入力が受信されると、正しい応答が返されます - 次に、次の質問に移動します。ユーザー。彼らの応答には、質問2の応答をjavascriptから提供します。質問3に進み、はい/いいえの応答を探します。その他

何かすべての助けが大歓迎です。願わくば、ノブとしても、私は理解して助けてくれるでしょう。

私の現在のCodePen（https://codepen.io/therise03/pen/bYXVLK）は上記のロジックの説明を使用していますが、下に入力したように私の条件ワークフローを使用したいと思います。

所望の流れ：

条件1 [ 質問：あなたは雑誌の購読を継続しますか？テキストは継続して続行するか、NOを停止する{

If Yes: go to Condition2 
If No: “Thanks you are not subscribed” 

}]

CONDITION2 [ 質問：あなたの合計は$ XXXX.XXになります。あなたのカードをファイルに注文してお支払いしますか？続行する場合はYES、停止する場合はNOをテキスト入力します。 {

If Yes: go to Condition3 
If No: “OK we will not use card on file” 

]

Condition3 [ Question3：私たちは、この注文のためにあなたの船積みの住所を確認する必要があります。 123メインストリートです。 O'Fallon、MO 63368は正しいですか？続行する場合はYES、停止する場合はNOをテキスト入力します。 {

If Yes: “OK address confirmed” 
If No: “Address not confirmed” 

]

Answer 1

コメントで私たちの会話の後、私は答えを提出しようと思いました。

私はこれを解決するための良い練習になると思っていましたが、クリーンではないものの、それは機能し、改善することができます。

私はコードセットからJSに変更を加えました。

codepen：codepen.io/anon/pen/POMbNw？編集者=ここでは0010

はcodepen場合のコードはもう利用できないからである。

JS：

/* START: HELPERS */ 

function appendFromThem(msg){ // append a "fromThem" msg 
    $('<div class="message"><div class="fromThem"><p>'+msg+'</p></div></div>').insertAfter('.message:last'); 
} 

function appendFromMe(msg){ // append a "myMessage" msg 
    $('form.chat div.messages').append('<div class="message"><div class="myMessage"><p>' + msg + '</p></div></div>'); 
} 

function isString(str){ // check if param is a string 
    return jQuery.type(str) === "string"; 
} 

function areEqual(str1, str2){ // check if strings are the same after trimming and setting to lower case 
    if(!isString(str1) || !isString(str1)) return str1 === str2; // either of them is not a string, use the normal "===" 
    return str1.trim().toLowerCase() === str2.trim().toLowerCase(); 
} 

/* END: HELPERS */ 

// workflow types 
var WF_TYPE = { 
    Q: "question", 
    END: "end", 
    NEW: "new" // start new workflow after cuttent one 
} 

/* 
* The workflow object 
* each sub-object should have a "msg" and responses typically "yes" and "no" 
*/ 
var wf = { 
    type:WF_TYPE.Q, 
    msg:"Would you like to continue your magazine subscription? Text CONTINUE to continue or NO to stop.", 
    continue:{ 
    type: WF_TYPE.Q, 
    msg:"Your total will be $XXXX.XX. Would you like to pay for your order with your card on file? Text YES to continue or NO to stop.", 
    yes:{ 
     type:WF_TYPE.Q, 
     msg:"We need to confirm your shipping address for this order. Is 123 Main Street; O’Fallon, MO 63368 correct? Text YES to continue or NO to stop.", 
     yes: { 
     endMsg: "OK address confirmed", 
     msg: "some new question?", 
     type : WF_TYPE.NEW, 
     yes:{ 
      msg: "OK cool.", 
      type: WF_TYPE.END 
     }, 
     no:{ 
      msg: "NOT cool...", 
      type: WF_TYPE.END 
     } 

     }, 
     no: { 
     msg:"Address not confirmed", 
     type:WF_TYPE.END 
     } 
    }, 
    no:{ 
     msg: "OK we will not use card on file", 
     type: WF_TYPE.END 
    } 
    }, 
    no:{ 
    msg:"Thanks you are not subscribed", 
    type: WF_TYPE.END 
    } 
} 

/* 
* Transitions current workflow to the next based on user response 
* @param msgFromUser the msg that user typed 
* @returns a response object containing the new workflow, response and other options 
*/ 
function transition(currentWorkflow, msgFromUser){ 
    console.log('getResponse start', currentWorkflow, msgFromUser); 
    if (currentWorkflow.type === WF_TYPE.END){ 
    return { 
     wf: $.extend({}, currentWorkflow) 
    } 
    } 
    else if (currentWorkflow.type === WF_TYPE.Q){ 
    var newWorkflow; 
    var found = false; // if a user reponse was found in current workflow 
    $.each(currentWorkflow, function(key, val){ 
     if(!found && key !== "msg" && areEqual(key, msgFromUser)){ // check if user msg matches any of the valid responses 
     newWorkflow = $.extend({}, val); // cone the value 
     console.log("found it", newWorkflow) 
     found = true; 
     } 
    }); 

    return { 
     wf: newWorkflow ? newWorkflow : $.extend({}, currentWorkflow), 
     errorResponse: found ? undefined : "Sorry, we didn’t understand your response. Please try again." 
    } 
    } 
    else if(currentWorkflow.type === WF_TYPE.NEW){ 
    return { 
     wf: $.extend({}, currentWorkflow) 
    } 
    } 
} 


function scrollDown() { 
    var focusBottom = document.getElementById("textMessage"); 
    focusBottom.scrollTop = focusBottom.scrollHeight; 
} 


$("input").keypress(function(event) { 
    if (event.which == 13) { // if user clicked enter, submit 
    event.preventDefault(); 
    $('form.chat input[type="submit"]').click(); 
    } 
}); 

//appendFromThem(wf.msg); 
$('form.chat input[type="submit"]').click(function(event) { 
    $input = $('form.chat input[type="text"]'); 
    event.preventDefault(); 
    var message = $input.val(); 
    appendFromMe(message); 
    $defered = $.Deferred(); 
    var responseAndWf = transition(wf, message); // get response from workflow 
    if(responseAndWf){ 
    wf = responseAndWf.wf; 
    var response = responseAndWf.errorResponse ? responseAndWf.errorResponse : wf.msg; 
    setTimeout(function() { 
     if(wf.type !== WF_TYPE.NEW){ 
     appendFromThem(response); 
     } 
     scrollDown(); 
     $defered.resolve(); 
    }, 1500); 
    } 

    if(wf.type === WF_TYPE.NEW){ 

    $defered.then(function(){ 
     appendFromThem(wf.endMsg); 
     wf.type = WF_TYPE.Q; 
     setTimeout(function() { 
     appendFromThem(wf.msg); 
     },2000) 
    }); 
    } 
    $input.val(''); 
    scrollDown(); 
}); 

CSS：

input, textarea, [contenteditable] { 
    color: #666; 
    caret-color: blue; 
} 

body { 
    background: #fff; /* For browsers that do not support gradients */ 
    font-family: 'Rubik'; 
    font-weight: 300; 
    color: #fff; 
    font-size:16px; 


} 

h1 { 
    color: #fff; 
    font-family: 'Rubik'; 
    font-weight: 400; 
} 


::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
color: #cdced2; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #cdced2; 
opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #cdced2; 
opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
color: #cdced2; 
} 
::-ms-input-placeholder { /* Microsoft Edge */ 
color: #cdced2; 
} 
form.chat .myMessage, form.chat .fromThem { 
    max-width: 90%; 
} 



form.chat *{ 
    transition:all .5s; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 

form.chat { 
    margin:0; 
    cursor:default; 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    top:0; 
    -webkit-touch-callout: none; /* iOS Safari */ 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
    -khtml-user-select: none; /* Konqueror */ 
    -moz-user-select: none;  /* Firefox */ 
    -ms-user-select: none;  /* IE/Edge */ 
    user-select: none; 
    border:0 none; 
} 

form.chat span.spinner{ 
    -moz-animation: loading-bar 1s 1; 
    -webkit-animation: loading-bar 1s 1; 
    animation: loading-bar 1s 1; 
    display: block; 
    height: 2px; 
    background-color: #00e34d; 
    transition: width 0.2s; 
    position:absolute; 
    top:0; left:0; right:0; 
    z-index:4 
} 

form.chat .messages{ 
    display:block; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position:relative; 
    height:90%; 
    width:100%; 
    padding:1% 3% 7% 3%; 
    border:0 none; 

} 

form.chat ::-webkit-scrollbar {width: 3px; height:1px;transition:all .5s;z-index:10;} 
form.chat ::-webkit-scrollbar-track {background-color: white;} 
form.chat ::-webkit-scrollbar-thumb { 
    background-color: #bec4c8; 
    border-radius:3px; 
} 

form.chat .message{ 
    display:block; 
    width:98%; 
    padding:0.5%; 
} 

form.chat .message p{ 
    margin:0; 
} 

form.chat .myMessage, 
form.chat .fromThem { 
    max-width: 50%; 
    word-wrap: break-word; 
    margin-bottom: 20px; 
} 



form.chat .myMessage,.fromThem{ 
    position: relative; 
    padding: 10px 20px; 
    color: white; 
    border-radius: 25px; 
    clear: both; 
    font: 400 15px 'Open Sans', sans-serif; 
} 

form.chat .myMessage { 
    background: #00e34d; 
    color:white; 
    float:right; 
    clear:both; 
    border-bottom-right-radius: 20px 0px\9; 
} 

form.chat .myMessage:before { 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    bottom: -2px; 
    right: -8px; 
    height: 19px; 
    border-right: 20px solid #00e34d; 
    border-bottom-left-radius: 16px 14px; 
    -webkit-transform: translate(0, -2px); 
    transform: translate(0, -2px); 
    border-bottom-left-radius: 15px 0px\9; 
    transform: translate(-1px, -2px)\9; 
} 

form.chat .myMessage:after { 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    bottom: -2px; 
    right: -42px; 
    width: 12px; 
    height: 20px; 
    background: white; 
    border-bottom-left-radius: 10px; 
    -webkit-transform: translate(-30px, -2px); 
    transform: translate(-30px, -2px); 
} 

form.chat .fromThem { 
    background: #E5E5EA; 
    color: black; 
    float: left; 
    clear:both; 
    border-bottom-left-radius: 30px 0px\9; 
} 
form.chat .fromThem:before { 
    content: ""; 
    position: absolute; 
    z-index: 2; 
    bottom: -2px; 
    left: -7px; 
    height: 19px; 
    border-left: 20px solid #E5E5EA; 
    border-bottom-right-radius: 16px 14px; 
    -webkit-transform: translate(0, -2px); 
    transform: translate(0, -2px); 
    border-bottom-right-radius: 15px 0px\9; 
    transform: translate(-1px, -2px)\9; 
} 

form.chat .fromThem:after { 
    content: ""; 
    position: absolute; 
    z-index: 3; 
    bottom: -2px; 
    left: 4px; 
    width: 26px; 
    height: 20px; 
    background: white; 
    border-bottom-right-radius: 10px; 
    -webkit-transform: translate(-30px, -2px); 
    transform: translate(-30px, -2px); 
} 

form.chat date { 
    position:absolute; 
    top: 10px; 
    font-size:14px; 
    white-space:nowrap; 
    vertical-align:middle; 
    color: #8b8b90; 
    opacity: 0; 
    z-index:4; 
} 

form.chat .myMessage date { 
    left: 105%; 
} 

form.chat .fromThem date { 
    right: 105%; 
} 

form.chat input{ 
    /* font: 400 13px 'Open Sans', sans-serif; */ 
    font: 400 1em 'Open Sans', sans-serif; 
    border:0; 
/* padding:0 15px; */ 
    padding: 15px 15px 0 15px; 
    height:10%; 
    outline:0; 
} 

form.chat input[type='text']{ 
    width:73%; 
    float:left; 
} 

form.chat input[type='submit']{ 
    width:23%; 
    background:transparent; 
    color:#00E34D; 
    font-weight:700; 
    text-align:right; 
    float:right; 
} 

    form.chat .myMessage,form.chat .fromThem{ 
    font-size:1.1em; 

    } 



    form.chat .myMessage, 
    form.chat .fromThem { 
    max-width: 90%; 
    } 

@-moz-keyframes loading-bar { 
    0% { 
    width: 0%; 
    } 
    90% { 
    width: 90%; 
    } 
    100% { 
    width: 100%; 
    } 
} 

@-webkit-keyframes loading-bar { 
    0% { 
    width: 0%; 
    } 
    90% { 
    width: 90%; 
    } 
    100% { 
    width: 100%; 
    } 
} 

@keyframes loading-bar { 
    0% { 
    width: 0%; 
    } 
    90% { 
    width: 90%; 
    } 
    100% { 
    width: 100%; 
    } 
} 

/* DEMO */ 
.iphone{ 
    /* 
    width:300px; 
    height:609px; 
    background-image:url('http://www.adobewordpress.com/tasarim/images/iphone6.png'); 
    background-size:100% 100%; 
    margin:0 auto; 
    */ 
    width:100%; 

} 

.border{ 
    /* position:absolute; 
    top:12.3%;right:7%;left:7%;bottom:12%; 
    overflow:hidden; */ 
} 

a.article{ 
    position:fixed; 
    bottom:15px;left:15px; 
    display:table; 
    text-decoration:none; 
    color:white; 
    background-color:#00e34d; 
    padding: 10px 20px; 
    border-radius: 25px; 
    font: 400 15px 'Open Sans', sans-serif; 
} 

HTML：

<div class="iphone"> 
    <div class="imessage-header"></div> 
    <div class="border"> 
    <form class="chat"> 
     <span></span> 
     <div class="messages" id="textMessage"> 
     <div class="message"> 
      <div class="fromThem"> 
      <p>Would you like to continue your magazine subscription? Text CONTINUE to continue or NO to stop.</p> 
      </div> 
     </div> 
     <div class="message magPrice" style="display:none;"> 
      <div class="fromThem new"> 
      <p>Your total will be $XXXX.XX. Would you like to pay for your order with your card on file? Text YES to continue or NO to stop.</p> 
      </div> 
     </div> 
     <div class="message addressVerification" style="display:none;"> 
      <div class="fromThem new"> 
      <p>We need to confirm your shipping address for this order. Is 123 Main Street; O’Fallon, MO 63368 correct? Text YES to continue or NO to stop.</p> 
      </div> 
     </div> 
     <div class="message goToWeb" style="display:none;"> 
      <div class="fromThem new"> 
       <p>To change your shipping address go to this <a href="#">website</a>.</p> 
      </div> 
     </div> 
     </div> 
     <div style="position:fixed;bottom:0;left:0;border:1px solid #ddd;width:100%;z-index:101;background-color:#fff;height:50px;"> 
     <input type="text" placeholder="Your message" autofocus style="height:auto;"> 
     <input type="submit" value="Send" style="height:auto;"> 
     </div> 
    </form> 
    </div> 
</div>