Extensiveform API

By using the Extensiveform API you can generate complex network structures or decision trees. Students get a visualization for their decisions and the structure of interaction. The graphs can be individualized by changing the nodes to ELLIPSE, RECTANGLE, TRIANGLE, DIAMOND, HEXAGON, OCTAGON, PARALLELOGRAM, ROUNDRECT or VEE. The arrows for the nodes can be changed as well. For further details, please go to the cytoscape homepage.

Example Code

$extensiveformApi = $api->get('sophielabs_extensiveform');

$nodes = array(
'1' => array('id' => 1, 'label' =>1, 'bg' => '#008000', 'shape' => 'ellipse'),
'2' => array('id' => 2, 'label' =>2, 'bg' => '#008000', 'shape' => 'ellipse'),
'3' => array('id' => 3, 'label' =>3, 'bg' => '#008000', 'shape' => 'ellipse'),
'4' => array('id' => 4, 'label' =>4, 'bg' => '#008000', 'shape' => 'ellipse'),
'5' => array('id' => 5, 'label' =>5, 'bg' => '#008000', 'shape' => 'ellipse'),
'6' => array('id' => 6, 'label' =>6, 'bg' => '#008000', 'shape' => 'ellipse'),
'7' => array('id' => 7, 'label' =>7, 'bg' => '#008000', 'shape' => 'ellipse'),
'8' => array('id' => 8, 'label' =>8, 'bg' => '#008000', 'shape' => 'ellipse'),
'9' => array('id' => 9, 'label' =>9, 'bg' => '#008000', 'shape' => 'ellipse'),
'10' => array('id' => 10, 'label' =>10, 'bg' => '#008000', 'shape' => 'ellipse'),
'11' => array('id' => 11, 'label' =>11, 'bg' => '#008000', 'shape' => 'ellipse'),
'12' => array('id' => 12, 'label' =>12, 'bg' => '#008000', 'shape' => 'ellipse'),
'13' => array('id' => 13, 'label' =>13, 'bg' => '#008000', 'shape' => 'ellipse'),
'14' => array('id' => 14, 'label' =>14, 'bg' => '#008000', 'shape' => 'ellipse'),
'15' => array('id' => 15, 'label' =>15, 'bg' => '#008000', 'shape' => 'ellipse'),
'16' => array('id' => 16, 'label' =>16, 'bg' => '#008000', 'shape' => 'ellipse'),
'17' => array('id' => 17, 'label' =>17, 'bg' => '#008000', 'shape' => 'ellipse'),
'18' => array('id' => 18, 'label' =>18, 'bg' => '#008000', 'shape' => 'ellipse'),
'19' => array('id' => 19, 'label' =>19, 'bg' => '#008000', 'shape' => 'ellipse'),
'20' => array('id' => 20, 'label' =>20, 'bg' => '#008000', 'shape' => 'ellipse'),
'21' => array('id' => 21, 'label' =>21, 'bg' => '#008000', 'shape' => 'ellipse'),
);

$edges = array(
'1' => array('source' => '1', 'target' => '2', 'label' =>'1 - 2'),
'2' => array('source' => '1', 'target' => '3', 'label' =>'1 - 3'),
'3' => array('source' => '2', 'target' => '4', 'label' =>'2 - 4'),
'4' => array('source' => '3', 'target' => '5', 'label' =>'3 - 5'),
'5' => array('source' => '4', 'target' => '6', 'label' =>'4 - 6'),
'6' => array('source' => '4', 'target' => '7', 'label' =>'4 - 7'),
'7' => array('source' => '5', 'target' => '8', 'label' =>'5 - 8'),
'8' => array('source' => '6', 'target' => '9', 'label' =>'6 - 9'),
'9' => array('source' => '7', 'target' => '10', 'label' =>'7 - 10'),
'10' => array('source' => '7', 'target' => '11', 'label' =>'7 - 11'),
'11' => array('source' => '8', 'target' => '12', 'label' =>'8 - 12'),
'12' => array('source' => '9', 'target' => '13', 'label' =>'9 - 13'),
'13' => array('source' => '9', 'target' => '14', 'label' =>'9 - 14'),
'14' => array('source' => '10', 'target' => '15', 'label' =>'10 - 15'),
'15' => array('source' => '10', 'target' => '16', 'label' =>'10 - 16'),
'16' => array('source' => '11', 'target' => '17', 'label' =>'11 - 17'),
'17' => array('source' => '12', 'target' => '18', 'label' =>'12 - 18'),
'18' => array('source' => '12', 'target' => '19', 'label' =>'12 - 19'),
'19' => array('source' => '16', 'target' => '20', 'label' =>'16 - 20'),
'20' => array('source' => '19', 'target' => '21', 'label' =>'19 - 21'),
);

$gameOptions = array("zoom" => 0.5, "pan" => array("x" => 150, "y" => 50));

echo $extensiveformApi->renderGraph($nodes, $edges, $gameOptions, "game1"); ?>

To generate the network structure shown below, simply copy the above code to any content tab of any step. If you would like to connect the decision tree to a multiple choice decision, please have a look at the Extensive Form Steptype.

Visualization Extensiveform API - Network Structure