Hierarchical Viewer for a question/answer kind of navigation

stan zhen asked on March 10, 2018 23:01

Hi,

I'm trying to improve upon one of my sites navigation by using page types and hierarchical transformations to have users kind of go through a question and answer game kind of interface. Users would go to that page and there would be boxes asking them questions that they will select, upon selecting it would display the next box/answer corresponding to what they chose on the first box and so forth....

Here's a picture of what i'm going for: imgur link to image

Right now I'm having trouble getting the correct layout. That I want, I can get the first 4 choices to show up but having trouble getting the sub choices to be in the correct places. I have a container page type that contains hierarchical transformations of my custom page types.

Something like this: Hierarchical transformation -> Header transformation level 0, Footer transformation level 0, Item transformation level 0 all 4 first choices share the same page type, Header transformation level 1, Footer transformation level1, Item transformation level 1 all sub choices share the same page type.

Any help would be appreciated, thanks!

Correct Answer

Trevor Fayas answered on March 12, 2018 15:49

Sure.

Say you have 2 Page Types "Question" and "Answers", and have it structured as such:

Question 1
  Answer A
    Question 2A
        Answer 2A
        Answer 2B
  Answer B
    Question 2B
        Answer 2A
        Answer 2B

I would have the item transformation (of type text/xml) for Question look like

{"QuestionText":"{% QuestionTextField %}",
 "Answers": [
    {^SubLevelPlaceHolder^}
    ]}

And the Answer item transformation look like:

{"AnswerText":"{% AnswerTextField %}",
 "AnswerValue":"{% AnswerValueField %}",
 "SubQuestions":[
     {^SubLevelPlaceHolder^}
 ]}

Have a head at level 0 look like

<script type="text/javascript">
var QuestionsObj = {"Questions": [

And Footer level 0 look like

]};
</script>

And lastly a seperator transformation of just a comma

,

Put it all together, you should get this:

<script type="text/javascript">
    var QuestionsObj = {
  "Questions": [
    {
      "QuestionText": "What is 1+1?",
      "Answers": [
        {
          "AnswerText": "2",
          "AnswerValue": "2",
          "SubQuestions": [
            {
              "QuestionText": "How sure are you?",
              "Answers": [
                {
                  "AnswerText": "Very",
                  "AnswerValue": "very",
                  "SubQuestions": []
                },
                {
                  "AnswerText": "Not too sure",
                  "AnswerValue": "nottosure",
                  "SubQuestions": []
                }
              ]
            }
          ]
        },
        {
          "AnswerText": "1",
          "AnswerValue": "1",
          "SubQuestions": [
            {
              "QuestionText": "Are you really sure?",
              "Answers": [
                {
                  "AnswerText": "I don't like math",
                  "AnswerValue": "idontlikemath",
                  "SubQuestions": []
                },
                {
                  "AnswerText": "I am sure!",
                  "AnswerValue": "thispersonisntsmart",
                  "SubQuestions": []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};
    </script>

from here you can then use jquery / javascript to build your drop downs dynamically and load the next questions from that answer's sub question object.

0 votesVote for this answer Unmark Correct answer

Recent Answers


Trevor Fayas answered on March 11, 2018 22:29

It is going to depend a bit on how you want to leverage the hierarchy structure to produce your quiz / answers.

Are you using the transformation to try to render the current step's drop downs? when they select 1, does the page reload with their selection that you are then trying to render the next?

Or perhaps are you using the transformation to render JSON so you can use client-side logic to create the question system.

I've done something similar in the past, where there would be a reload on answering the question, and then the page would render the next question (not necessarily based on the previous, but could), but that had a page reload in between each answer.

If you can give us a little more on how you are leveraging this, and what the current output of your transformation is, it could help us in guiding you!

0 votesVote for this answer Mark as a Correct answer

stan zhen answered on March 11, 2018 22:44

Hmmm, a page reload could work. What I had in mind before was more of using javascript if possible to hide/display the children choices and grey out the rest of the unselected options. So technically the choices would still all be visible for example, user select choice 1 -> choice 2, 3, and 4 would be greyed out/disabled via javascript. then underneath the main choice 1, 2, 3, and 4 would be the 4 sub choices that would appear like it does in the imgur link.

The same layout would apply if user select choice 2 -> then choice 1, 3, and 4 would be greyed out and then the 4 sub choices would appear underneath and so forth...

Hope that gives a little more clarity of what I'm trying to do?

Thanks

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on March 11, 2018 22:59

I think using JavaScript would be the better way to go. So in this case, you want to use the viewer and transformation to create a json object and assign it to a variable, then just use JavaScript on load to leverage that json to do what you want it to.

Just wrap your transformation in the content before and after of:

<Script type="text/javascript">
var myquestionstructure={

And

}; </Script>

0 votesVote for this answer Mark as a Correct answer

stan zhen answered on March 11, 2018 23:51

Cool, would you be able to elaborate on making a json object and using that? I've been using page types and transformations to load my choices/answers. I've made a container page type and then a custom page type called ParentChoices which lets users create a page type with a title and description and have it rendered based on a header, footer, and item transformation in a hierarchical transformation. If that makes any sense?

Thanks

0 votesVote for this answer Mark as a Correct answer

stan zhen answered on March 12, 2018 23:19 (last edited on March 12, 2018 23:23)

Thanks a lot! this worked out a lot better than expected. Just a quick final question I know this isn't really related to my initial question, but is there a way to have one transformation that's strictly just javascript? like for example an item transformation that only contains:

<script type="text/javascript">
    //js code logic here
</script>

The problem that I might run into is, lets say if I put custom javascript code in one of my item transformations and that transformation renders 4 times, it will create 4 script sections and call my functions 4 times.

I've tried to make a regular item transformation that contains just my javascript logic but it doesn't seem to work, my script doesn't get detected.

Thanks!

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on March 13, 2018 04:29 (last edited on March 24, 2018 12:16)

Usually i don't put the function caller in the transformation itself, i just use the transformation to set a variable at a global level, so i can reference it from any other script i want to call.

Otherwise though if you want a single transformation but only want a certain section to render 1 time, you can leverage the DataItemIndex and DataItemCount values that are available.

If using text/xml transformation, you can do:

{% if(DataItemIndex == 0) { %}
   // stuff that will only show on the first item
{% } %}

Just be aware that these numbers are ALL items, regardless of their level, so if you try to use this in a Hierarchy Transformation, may not work as expected.

0 votesVote for this answer Mark as a Correct answer

stan zhen answered on March 13, 2018 05:34

Ahh, okay cool yeah that can work for me. Thanks a lot for your help, much appreciated!

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.