tmcw/contact.js

## contact.js
var state = {
    choices: []
};

var root = [q('How can we help you?', [
    q('Select a topic'),
    q('Billing, signing in, and payments'),
    q('Report a bug', [
        q('With Mapbox software')
    ]),
    q('Logging in and managing your account'),
    q('Using Mapbox'),
    q('Report missing attribution')
])];

function q(t, o) { return { title: t, options: o || [] }; }

function generateQuestion(depth, question, value) {
    var container = document.createElement('div');

    var title = container.appendChild(document.createElement('h3'));
    title.innerText = question.title;

    var select = container.appendChild(document.createElement('select'));

    question.options.forEach(function(opt) {
        var elem = select.appendChild(document.createElement('option'));
        elem.value = opt.title;
        elem.innerText = opt.title;
    });

    select.onchange = function() {
        dispatch({
            type: 'ANSWER_QUESTION',
            depth: depth,
            value: this.value
        });
    };

    if (value) select.value = value;

    return container;
}

function generateQuestions(state) {
    var container = document.createElement('div');
    container.appendChild(generateQuestion(0, root[0], state.choices[0]));

    var node = root[0];
    state.choices.forEach(function (choice, i) {
        node = node.options.filter(function (o) {
            return o.title === choice;
        })[0];
        if (node.options.length) {
            container.appendChild(generateQuestion(i, node, choice));
        }
    });

    return container;
}

function dispatch(action) {
    state = reducer(state, action);
    render(state);
}

function reducer(state, action) {
    switch (action.type) {
        case 'ANSWER_QUESTION':
            if (action.depth < state.choices) {
                state.choices = state.choices.slice(0, action.depth);
            }
            state.choices[action.depth] = action.value;
    }
    return state;
}

function render(state) {
    $('#app')
        .html('')
        .append(generateQuestions(state));
}

render(state);

## index.html
<html>
<head>
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<script src='https://code.jquery.com/jquery-3.1.0.js'></script>
</head>
<body>
  <div class='limiter fill-darken0'>
    <div class='pad4' id='app'>
    </div>
  </div>
</body>
<script src='contact.js'></script>
</html>
	var state = {
	choices: []
	};

	var root = [q('How can we help you?', [
	q('Select a topic'),
	q('Billing, signing in, and payments'),
	q('Report a bug', [
	q('With Mapbox software')
	]),
	q('Logging in and managing your account'),
	q('Using Mapbox'),
	q('Report missing attribution')
	])];

	function q(t, o) { return { title: t, options: o \|\| [] }; }

	function generateQuestion(depth, question, value) {
	var container = document.createElement('div');

	var title = container.appendChild(document.createElement('h3'));
	title.innerText = question.title;

	var select = container.appendChild(document.createElement('select'));

	question.options.forEach(function(opt) {
	var elem = select.appendChild(document.createElement('option'));
	elem.value = opt.title;
	elem.innerText = opt.title;
	});

	select.onchange = function() {
	dispatch({
	type: 'ANSWER_QUESTION',
	depth: depth,
	value: this.value
	});
	};

	if (value) select.value = value;

	return container;
	}

	function generateQuestions(state) {
	var container = document.createElement('div');
	container.appendChild(generateQuestion(0, root[0], state.choices[0]));

	var node = root[0];
	state.choices.forEach(function (choice, i) {
	node = node.options.filter(function (o) {
	return o.title === choice;
	})[0];
	if (node.options.length) {
	container.appendChild(generateQuestion(i, node, choice));
	}
	});

	return container;
	}

	function dispatch(action) {
	state = reducer(state, action);
	render(state);
	}

	function reducer(state, action) {
	switch (action.type) {
	case 'ANSWER_QUESTION':
	if (action.depth < state.choices) {
	state.choices = state.choices.slice(0, action.depth);
	}
	state.choices[action.depth] = action.value;
	}
	return state;
	}

	function render(state) {
	$('#app')
	.html('')
	.append(generateQuestions(state));
	}

	render(state);
	<html>
	<head>
	<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
	<script src='https://code.jquery.com/jquery-3.1.0.js'></script>
	</head>
	<body>
	<div class='limiter fill-darken0'>
	<div class='pad4' id='app'>
	</div>
	</div>
	</body>
	<script src='contact.js'></script>
	</html>