space10-community / conversational-form

Turning web forms into conversations
https://space10-community.github.io/conversational-form/
MIT License
3.8k stars 771 forks source link

Looping back to the start #352

Closed cdappleton closed 5 years ago

cdappleton commented 5 years ago

My aim is, for when the form reaches the 'end' to have a 'would you like to start again' option. With 'no' it would essentially display a goodbye message but with 'yes' it would start from scratch (or a chosen point).

My code kinda does this but it makes the page refresh and chucks all the options into the address bar. I'd rather it just loop back within the same chat session so the user could potentially scroll up and see the previous text.

The overall project is a 'help-bot' style conversation where users select different options and it sends them down multiple path options (11). Everything else is mapped perfectly and works great, but it's just the looping I'm having trouble with.

Please see a portion of the code below (two of the 11 options and the attempt at a loop)

<form id="form" cf-form ...>
    <input id="helloagain" type="text" cf-questions="What category does your query come under?" cf-conditional-loopoptions="yes">
        <cf-robot-message cf-questions="Welcome to the Kent Union Advice service. This short conversation should hopefully point you in the right direction as to your next steps, whether that be you find the information you are looking for or if you to book an appointment to see us in person."></cf-robot-message>
            <select cf-questions="What category does your query come under?" name="introductionoptions">
                <option value="academic">Academic</option>
                <option value="careleavers">Care Leavers</option>
                <option value="consumer">Consumer</option>
                <option value="employment">Employment</option>
                <option value="eustudents">EU Students</option>
                <option value="finance">Finance</option>
                <option value="health">Health</option>
                <option value="housing">Housing</option>
                <option value="international">International and Visa</option>
                <option value="safety">Safety and Welfare</option>
                <option value="other">Other</option>
            </select>

            <!--Path 1 Academic-->
            <cf-robot-message id="academicbranch" name="academicbranch" cf-questions="Academic query?" cf-conditional-introductionoptions="academic"></cf-robot-message>
            <select cf-questions="Okay, and a bit more specific if possible." cf-conditional-introductionoptions="academic" name="academicbranchoptions">
                <option value="appeals">Appeals</option>
                <option value="extenuatingcicumstances">Extenuating Cicumstances</option>
                <option value="learningresources">Learning Resources for International Students</option>
                <option value="plagarism">Plagarism and Academic Integrity</option>
                <option value="studyskills">Study Skills</option>
                <option value="universityregulations">University Regulations</option>
            </select>

            <cf-robot-message cf-questions="You clicked Appeals" cf-conditional-academicbranchoptions="appeals"></cf-robot-message>
            <cf-robot-message cf-questions="You clicked Extenuating Circumstances" cf-conditional-academicbranchoptions="extenuatingcicumstances"></cf-robot-message>
            <cf-robot-message cf-questions="You clicked Learning Resources for International Students" cf-conditional-academicbranchoptions-="learningresources"></cf-robot-message>
            <cf-robot-message cf-questions="You clicked Plagarism and Academic Integrity" cf-conditional-academicbranchoptions-="plagarism"></cf-robot-message>
            <cf-robot-message cf-questions="You clicked Study Skills" value="value" cf-conditional-academicbranchoptions-="studyskills"></cf-robot-message>
            <cf-robot-message cf-questions="You clicked University Regulations" value="value" cf-conditional-academicbranchoptions-="universityregulations"></cf-robot-message>

            <!--Path 2 Care Leavers-->
            <cf-robot-message id="careleaversbranch" name="careleaversbranch" cf-questions="Care Leavers query?" cf-conditional-introductionoptions="careleavers"></cf-robot-message>
            <select cf-questions="Okay, and a bit more specific if possible." cf-conditional-introductionoptions="careleavers" name="careleaversbranchoptions">
                <option value="careleaveroption1">Option1</option>
                <option value="careleaveroption2">Option2</option>
            </select>

            <cf-robot-message cf-questions="You clicked Option 1" cf-conditional-careleaversbranchoptions="careleaveroption1"></cf-robot-message>
            <cf-robot-message cf-questions="You clicked Option 2" cf-conditional-careleaversbranchoptions="careleaveroption2"></cf-robot-message>

            <!--End of the road-->
            <cf-robot-message id="loop" name="loop" cf-questions="Would you like to read any more advice?"></cf-robot-message>
            <select cf-questions="Select:" name="loopoptions" >
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>

            <input id="goodbye" type="text" cf-questions="Thank you for using Kent Union Advice Service" cf-conditional-loopoptions="no" />
        </form>

        <div id="cf-context" role="cf-context" cf-context></div>
jenssogaard commented 5 years ago

You could use the FlowStepManager to check the tag and response of the last question and then call something like ConversationalForm.flowManager.showStep(0) to start at question 0 again.