Is this a good use for javascript eval? -
we have form many question, of displayed based on dynamic logic related other questions sent on in json.
each question have logic similar to, possibly more complex than:
display me if: (quest1 == value1 or quest1 == value2) , (quest2 == value3 or quest3 == value4)
.
simplified json example:
[ "and", { "quest1": "value1,value2" }, [ "or", { "quest2": "value3" }, { "quest3": "value4" } ] ]
as parent question values change seems 1 way determine visibility of child question parse json given question js-friendly syntax above, including actual current values , use eval()
. there better alternative?
thanks!
i have built exact scenario. assembled questions , answers tree server-side , load model page via ajax call. each question object has question text , array of answer objects, , property (initially null) hold chosen answer. each answer object contains answer value , pointer next question based on answer. use self-referential knockout template displays questions , list of answers in select. when answer chosen, triggers if logic displays next question , possible answers- - if: question.chosenanswer().
the key here build tree , traverse using whatever library or framework using.
i on phone right , add code when have real keyboard.
answer structure: { answerid, answervalue, nextquestion }
where answerid unique number/id identifies unique path through tree answer.
question tree:
{ question: "are there lots of questions?", // string chosenanswer: null, // answer answers: [ { answerid: 1, answervalue: "yes", nextquestion: { question: "how many answers can there be?", chosenanswer: null, answers: [ { answerid: 2, answervalue: "1", nextquestion: null // leaf }, { answerid: 4, answervalue: "2", nextquestion: { question: "how decide?", chosenanswer: null, answers: [ { answerid: 5, answervalue: "guess", nextquestion: null // leaf }, { answerid: 6, answervalue: "think", nextquestion: null // leaf }, ] } }, ] } }, { answerid: 7, answervalue: "no" nextquestion: null // leaf }, ] }
you can load via ajax call , if using jquery ajax, can parsed json in .done(response). if not, can use json.parse(). no eval needed. build knockout.js view model based on structure.
then matter of using framework (knockout, angular, etc) manage incremental display based on chosen answers. how depends on tools.
i populate select dropdowns based on current question's array of answers. have subscription (or watch) on chosenanswer property when leaf answer chosen (nextquestion null or undefined), fire event includes answer object chosen part of event data. thus, can record, or react to, final chosen answer.
as example, self-referential template used in knockout.js:
<script id="qatmpl" type="text/html"> <div class="col-md-12 clearfix leaders"> <div> <label class="question pull-left">{{question}}</label> <span> <select class="pull-right" data-bind="disable: $root.editbuffer().valueid(), options: answers, optionstext: 'answer', optionvalue: 'answer', value: chosenanswer, optionscaption:'choose...'"></select> </span> </div> </div> <!-- ko if: $data && chosenanswer&& chosenanswer() && chosenanswer().nextquestion --> <!-- ko template: {name: 'qatmpl', data: chosenanswer().nextquestion} --><!-- /ko --> <!-- /ko --> </script>
i hope idea. wish more specific, lot of implementation details specific framework , templating engine.
Comments
Post a Comment