How to create a FAQ page from Mind42

Mind42 is a very simple, practically free mind-mapping system. It costs just $10USD per year. Note I am not having any affiliation with them.

This is how we create a FAQ page from a mindmap there. Here is the original mindmap: KnownEmailFaq - Mind42

And here is how it looks on our website: https://known.email/faq

The major advantage of having a mindmap to make your FAQ is that you can easily add/remove/edit questions and answers. You don’t have to touch your page at the SaaS site. Also,you can bring in collaborators to help you with the editing.

Important: The tree structure of the FAQ mindmap should be made exactly as shown in this example.

Tip: The Mind42 note editor – which is what is used to create the answer for each question – does not have many formatting buttons. So if you wanted to insert links, etc; what to do? Worry not: Just create the link in some WYSIWYG html editor somewhere (not Word, please) and copy just that rendered link into the mindmap. If you copy the entire rendered html; then Mind42 inserts lots of junk (Basically it writes out each and every style attribute for every element) and that will make the entire note quite large. But copy-pasting just the rendered links are fine.

The code to reformat the mindmap
And this this is how we re-format the data there into a FAQ, using PHP. You could do the same using some other programming language too – after all it is just processing the JSON data structure.

Note that in order for your server to extract the data inside the mindmap you cannot use the earlier URL. Instead you need to first publish the mindmap (Keep it unlisted, if you prefer it not to be seen easily by others) and then use the embed link they have given under “Publish”. So you would notice in the PHP code below, it is the embed URL that I am using to do file_get_contents(…)

In this code, I am not showing the rest of the CSS, HTML etc where this is embedded. I am sure a developer can wrap all this properly into the required client code.

<?php

$str = file_get_contents("https://mind42.com/mindmap/53b0e72f-5e7f-4200-892a-786550bcda51?rel=embed");

preg_match('/mind42\.init\(\((.*)\)\);/',$str,$matches);
$obj = json_decode($matches[1]);
$arr= $obj->root->children[0]->children;
$cou = 0;
foreach($arr as $head){
  $arr2 = $head->children;
  echo '<div clas="one"><h3>'.$head->attributes->text.'</h3>';
   foreach($arr2 as $n)
    {
     echo '<div class="oho">
                 <h4 class="ques">'.$n->attributes->text.'</h4>';
                    echo '<div class="ans">'.$n->attributes->note.'<br/><br/></div>';
     echo  "</div>";
     $cou++;
    }
  echo '</div>';
}
for($i=0; $i < $cou; $i++){
     echo '<br/><br/>';
}

?>

Did you notice that in the above PHP, it is adding some blank line breaks? That is because the jquery scrolls a clicked question and answer right to the top of the screen. See the jquery code below to understand how that is done

In order to do some clever folding of the questions and answer (You click/tap on the question and only that one opens up) Do some JQuery here as shown below:

<script type="text/javascript">

$(document).ready(function(){

    $('#showall').on("click",function(){

     $('.ans').toggle();

    });

    $('.ans').hide();

    $('h4').on('click',function(){

        $('.ans').hide();

        $(this)[0].scrollIntoView();

        $(window).scrollTop( $(this).offset().top );

        $(this).next().toggle();

      });

    });

</script>