Welcome to part four of this multi part series on logic tree.
And we can do this in two ways with pre built functions that make it really simple and easy. And we can explore how you can quickly customize it to your custom look. And feel. So let's open up our first logic app. Here we see the same categories that we've built in the previous parts. Let's go to the edit mode. And what we're going to do now is add a wiki sibling to the text node. And then we're going to click drag and drop these categories underneath this wiki element. Now what wiki does, this is an example of one of our pre built user interface layouts. So because these categories are now as child elements of the wiki, when I click preview we can see it turned to the categories into this eLearning module look and feel. So now users can click on the different menu items and see those screens and more of in this more intuitive eLearning module layout with next buttons and navigation. So now that we've done that, let's explore one other type of element underneath part two. Let's add two questions. So we'll add a question one and we'll add a question two. And let's go ahead and preview this. And we'll see if I click on part two, there's the two questions that we added. And what we're going to do is use another built in functionality called split pane to move this question on to the right side. So I'll go back to edit mode and I'll add as a sibling, a split pane. And then I'll add to Child's 2.2 panes here. This pane represents the left side, this represents the right I'll move question one underneath that pane and question two underneath that pane. Now that we've done that, let's preview, click on part two. And we can see that question one shows up on the left. And question two shows up on the right. So we quickly just explored two element types the wiki which uses categories to make an eLearning module layout and split pane which lets you quickly and easily put different types of content on the left and the right and split split up the content quickly and easily. And then the final thing let's explore is being able to customize in this part three. So I will go to our logic tree website. And I'm actually going to copy this HTML. So I've now copied it. I will add in part three as a child, a text node. I'm going to change this to WYSIWYG mode. Click into that paste the HTML that I just copied. And you can see it actually copied the website HTML. So now if I preview this, I click on part three. And there's the HTML that we've copied over from our website already formatted. And I click back to edit mode. Go down to part three by the way that we can see really quickly by clicking here, we can see the raw HTML that was actually copied, copied over. And so what we're going to do now is explore what if we wanted to add a question to show up in this box right here. So to do that, we're going to create a child question and then we'll call this question three.
And so we our goal here is we've added this question as a child to this text node with all this formatting. And we want this question three to show up directly here in this box. We've added it as a child. Let's now preview and what we see is that the question doesn't show up at all. And that's because we have to tell it where do we want that question to show up. So if we go back here, and we now let's say below this, add this little, you have to use this thing called handlebars. You add two of those brackets, and then we type in question three. Add two to close. That is all we needed to do. And logic tree knows how to do the rest. So this tells logic tree to put this question to show up there. So when I preview, we can now click on part three, and we see question three shows up. With the answer choice there as well. And so that shows us now we explored, you know first we use the wiki built in to convert our our categories into this eLearning module. Then we use a split pane to split questions from left to right and finally, we imported custom raw HTML and used the simple trick of these handlebars. To have logic tree content show up in the customized HTML.