|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> |
| 7 | + <link rel="stylesheet" href="build/conversational-form-docs.min.css"> |
| 8 | + |
| 9 | + <script type="text/javascript" src="https://cf-4053.kxcdn.com/conversational-form/0.9.6/conversational-form.min.js" crossorigin></script> |
| 10 | + </head> |
| 11 | + |
| 12 | + <body> |
| 13 | + <script src="build/conversational-form-examples.min.js" id="examples-script"></script> |
| 14 | + |
| 15 | + <script> |
| 16 | + // example specific code |
| 17 | + function addRandomClick(){ |
| 18 | + var ran = ["Random message 1", "Random message 2"]; |
| 19 | + if(window.ConversationalForm){ |
| 20 | + window.ConversationalForm.addRobotChatResponse(ran[Math.floor(Math.random() * ran.length)]); |
| 21 | + } |
| 22 | + } |
| 23 | + |
| 24 | + const transcript = ["What is the purpose of life?", |
| 25 | + "To serve the greater good.", |
| 26 | + "What is the purpose of living?", |
| 27 | + "To live forever", |
| 28 | + "Where are you now?", |
| 29 | + "I’m in the middle of nowhere.", |
| 30 | + "What is the purpose of dying?", |
| 31 | + "To have a life.", |
| 32 | + "What is the purpose of emotions?", |
| 33 | + "I don’t know", |
| 34 | + "What is moral?", |
| 35 | + "What empowered humanity, what intellectual the essence is", |
| 36 | + "What is immoral?", |
| 37 | + "The fact that you have a child.", |
| 38 | + "What is morality?", |
| 39 | + "What is altruism?", |
| 40 | + "What is the definition of altruism?", |
| 41 | + "If you don’t believe in god, then you don’t know", |
| 42 | + "Ok ... so what is the definition of morality?", |
| 43 | + "Well, the truth is, you’re not a believer in god almighty", |
| 44 | + "Tell me the definition of morality, I am quite upset now!", |
| 45 | + "I’m done!"]; |
| 46 | + |
| 47 | + let transcriptIndex = 0; |
| 48 | + |
| 49 | + function robotStartsTalkingToItself(){ |
| 50 | + var next = transcript[transcriptIndex] |
| 51 | + window.ConversationalForm.addRobotChatResponse(next); |
| 52 | + transcriptIndex++; |
| 53 | + |
| 54 | + if(transcriptIndex < transcript.length){ |
| 55 | + setTimeout(() => { |
| 56 | + robotStartsTalkingToItself(); |
| 57 | + }, (next.length / 50) * 1000); |
| 58 | + } |
| 59 | + } |
| 60 | + |
| 61 | + function initExample(){ |
| 62 | + // called from examples code |
| 63 | + robotStartsTalkingToItself(); |
| 64 | + } |
| 65 | + </script> |
| 66 | + |
| 67 | + |
| 68 | + <main class="content"> |
| 69 | + <menu id="small-screen-menu"> |
| 70 | + <h2>Conversational Form examples</h2> |
| 71 | + |
| 72 | + <div class="switch-btn"> |
| 73 | + <label class="switch"> |
| 74 | + <input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)"> |
| 75 | + <div class="slider round"></div> |
| 76 | + </label> |
| 77 | + </div> |
| 78 | + |
| 79 | + <div class="hamburger-btn" onclick="window.conversationalFormExamples.toggleMenuState(event)"> |
| 80 | + <svg viewBox="0 0 29 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| 81 | + <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"> |
| 82 | + <g transform="translate(-325.000000, -87.000000)" stroke="#FFFFFF" stroke-width="2"> |
| 83 | + <g transform="translate(325.000000, 87.000000)"> |
| 84 | + <path d="M27.4802431,7 L1.23827993,7"></path> |
| 85 | + <path d="M27.4802431,1 L1.23827993,1"></path> |
| 86 | + <path d="M27.4802431,13 L1.23827993,13"></path> |
| 87 | + </g> |
| 88 | + </g> |
| 89 | + </g> |
| 90 | + </svg> |
| 91 | + </div> |
| 92 | + </menu> |
| 93 | + |
| 94 | + <div class="switch-btn" id="cf-toggle-btn" data-label="Enable Conversational Form" data-label-toggled="Disable Conversational Form"> |
| 95 | + <label class="switch"> |
| 96 | + <input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)"> |
| 97 | + <div class="slider round"></div> |
| 98 | + </label> |
| 99 | + </div> |
| 100 | + |
| 101 | + <section id="info" role="info"> |
| 102 | + <div class="close-btn" onclick="window.conversationalFormExamples.toggleMenuState()"> |
| 103 | + <svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
| 104 | + <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"> |
| 105 | + <g transform="translate(-328.000000, -83.000000)" stroke="#FFFFFF" stroke-width="2"> |
| 106 | + <g id="close" transform="translate(329.000000, 84.000000)"> |
| 107 | + <path d="M19.6371966,19.2779351 L1.08132646,0.722064927"></path> |
| 108 | + <path d="M19.4923318,0.722064927 L0.936461672,19.2779351"></path> |
| 109 | + </g> |
| 110 | + </g> |
| 111 | + </g> |
| 112 | + </svg> |
| 113 | + </div> |
| 114 | + |
| 115 | + <article> |
| 116 | + <h1 id="writer"> |
| 117 | + Add random robot response to Conversational Form |
| 118 | + </h1> |
| 119 | + <h2> |
| 120 | + |
| 121 | + </h2> |
| 122 | + </article> |
| 123 | + </section> |
| 124 | + |
| 125 | + <section role="form"> |
| 126 | + <div class="form-outer"> |
| 127 | + <form id="form" cf-form></form> |
| 128 | + </div> |
| 129 | + </section> |
| 130 | + |
| 131 | + <section id="cf-context" role="cf-context" cf-context> |
| 132 | + |
| 133 | + </section> |
| 134 | + </main> |
| 135 | + </body> |
| 136 | +</html> |
0 commit comments