jensen/index-react.html

## index-react.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Conversations</title>
    <meta name="description" content="" />
    <meta name="author" content="" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <script type="text/babel">
      function Conversation(props) {
        return (
          <div>
            <h1>Conversation</h1>
            <ul>
              {props.conversation.map((message) => (
                <li key={message}>{message}</li>
              ))}
            </ul>
          </div>
        );
      }

      function Question(props) {
        const [correct, setCorrect] = React.useState(null);

        const attemptAnswer = (answer) =>
          axios
            .post("/answer", {
              conversationId: props.conversationId,
              questionId: props.question.id,
              answer,
            })
            .then((response) => {
              if (response.data.correct) {
                props.onCorrect();
              } else {
                setCorrect(false);
              }
            });

        React.useEffect(() => {
          setCorrect(null);
        }, [props.question]);

        return (
          <div>
            <h3 style={{ color: correct === false ? "red" : "black" }}>
              {props.question.question}
            </h3>
            <ul>
              {props.question.answers.map((answer) => (
                <li key={answer}>
                  <button
                    onClick={() => {
                      attemptAnswer(answer);
                    }}
                  >
                    {answer}
                  </button>
                </li>
              ))}
            </ul>
          </div>
        );
      }

      function Application() {
        const [state, setState] = React.useState({});
        const [currentQuestion, setCurrentQuestion] = React.useState(0);

        React.useEffect(() => {
          axios
            .get("/conversations/1e14ace4-7807-42a0-b542-9b99798526d2")
            .then((response) => setState(response.data));
        }, []);

        if (Object.keys(state).length === 0) {
          return <div>Loading</div>;
        }

        return (
          <div>
            <Conversation conversation={state.conversation} />
            <Question
              conversationId={state.id}
              question={state.questions[currentQuestion]}
              onCorrect={() => {
                if (currentQuestion < state.questions.length - 1) {
                  setCurrentQuestion(currentQuestion + 1);
                }
              }}
            />
          </div>
        );
      }

      ReactDOM.render(<Application />, document.getElementById("application"));
    </script>
  </head>
  <body>
    <div id="application"></div>
  </body>
</html>

## index-vanilla.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Conversations</title>
    <meta name="description" content="" />
    <meta name="author" content="" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      function addQuestion(conversationId, questions, questionIndex) {
        if (!questions[questionIndex]) {
          document.querySelector("section#questions").innerHTML = "All Done";
          return;
        }

        const question = questions[questionIndex];
        const questionItem = document.createElement("section");
        const questionHeader = document.createElement("h3");
        const questionText = document.createTextNode(question.question);

        questionHeader.append(questionText);
        questionItem.appendChild(questionHeader);

        const answerList = document.createElement("ul");

        for (const answer of question.answers) {
          const answerItem = document.createElement("li");
          const answerButton = document.createElement("button");

          answerButton.textContent = answer;

          answerItem.appendChild(answerButton);
          answerList.appendChild(answerItem);

          const questionId = question.id;

          answerButton.addEventListener("click", () => {
            axios
              .post("/answer", {
                conversationId,
                questionId,
                answer,
              })
              .then((response) => {
                if (response.data.correct) {
                  document.querySelector("section#questions").innerHTML = "";
                  addQuestion(conversationId, questions, questionIndex + 1);
                } else {
                  questionHeader.style.color = "red";
                }
              });
          });
        }

        questionItem.appendChild(answerList);

        document.querySelector("section#questions").appendChild(questionItem);
      }

      function createConversation(data) {
        const { id, conversation, questions } = data;

        const conversationSection = document.querySelector(
          "section#conversation"
        );
        const conversationList = document.createElement("ul");

        for (const message of conversation) {
          const item = document.createElement("li");
          item.textContent = message;
          conversationList.appendChild(item);
        }

        addQuestion(id, questions, 0);

        conversationSection.appendChild(conversationList);
      }

      function initialize() {
        axios
          .get("/conversations/1e14ace4-7807-42a0-b542-9b99798526d2")
          .then((response) => createConversation(response.data));
      }

      initialize();
    </script>
  </head>
  <body>
    <section id="conversation">
      <h1>Conversation</h1>
    </section>
    <section id="questions"></section>
  </body>
</html>

## server.js
const express = require("express");
const app = express();
const bodyparser = require("body-parser");

const conversations = [
  {
    id: "1e14ace4-7807-42a0-b542-9b99798526d2",
    conversation: ["Hey man", "Hey whats up?", "Nothing much", "Oh thats cool"],
    questions: [
      {
        id: "ad97da94-09aa-4125-a377-42b7d0fbc939",
        question: "What was the first thing said?",
        answers: ["hey man", "hi", "hello", "heyooo"],
      },
      {
        id: "4e0d2a63-baa6-4a2a-b222-20ea038f5b32",
        question: "What was the second thing said?",
        answers: [
          "hey whats up?",
          "how are you?",
          "what is that?",
          "where am i?",
        ],
      },
      {
        id: "0bb2ee33-10ee-4ca7-a6fc-2cedc6fef9e0",
        question: "What was the third thing said?",
        answers: [
          "nothing much",
          "i ate pizza",
          "i drank water",
          "i drank tea",
        ],
      },
      {
        id: "d472b692-d6e9-4011-9e61-16d3f368600f",
        question: "What was the fourth thing said?",
        answers: [
          "oh thats cool",
          "oh i dont like that",
          "that tastes good",
          "that tastes bad",
        ],
      },
    ],
  },
];

app.use(express.static("public"));

app.use(bodyparser.json());

app.post("/answer", (request, response) => {
  const conversationId = request.body.conversationId;
  const questionId = request.body.questionId;
  const answer = request.body.answer;

  const conversationIndex = conversations.findIndex(
    (conversation) => conversation.id === conversationId
  );

  const questions = conversations[conversationIndex].questions;

  const questionIndex = questions.findIndex(
    (question) => question.id === questionId
  );

  response.json({
    correct:
      conversations[conversationIndex].questions[questionIndex].answers[0] ===
      answer,
  });
});

app.get("/conversations/:id", (request, response) => {
  response.json(
    conversations.find((conversation) => conversation.id === request.params.id)
  );
});

app.get("/converstation", (request, response) => {
  response.json(conversations);
});

app.listen(3000, () => console.log("Connected to port 3000"));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Conversations</title>
	<meta name="description" content="" />
	<meta name="author" content="" />
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script
	crossorigin
	src="https://unpkg.com/react@16/umd/react.development.js"
	></script>
	<script
	crossorigin
	src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
	></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
	<script type="text/babel">
	function Conversation(props) {
	return (
	<div>
	<h1>Conversation</h1>
	<ul>
	{props.conversation.map((message) => (
	<li key={message}>{message}</li>
	))}
	</ul>
	</div>
	);
	}

	function Question(props) {
	const [correct, setCorrect] = React.useState(null);

	const attemptAnswer = (answer) =>
	axios
	.post("/answer", {
	conversationId: props.conversationId,
	questionId: props.question.id,
	answer,
	})
	.then((response) => {
	if (response.data.correct) {
	props.onCorrect();
	} else {
	setCorrect(false);
	}
	});

	React.useEffect(() => {
	setCorrect(null);
	}, [props.question]);

	return (
	<div>
	<h3 style={{ color: correct === false ? "red" : "black" }}>
	{props.question.question}
	</h3>
	<ul>
	{props.question.answers.map((answer) => (
	<li key={answer}>
	<button
	onClick={() => {
	attemptAnswer(answer);
	}}
	>
	{answer}
	</button>
	</li>
	))}
	</ul>
	</div>
	);
	}

	function Application() {
	const [state, setState] = React.useState({});
	const [currentQuestion, setCurrentQuestion] = React.useState(0);

	React.useEffect(() => {
	axios
	.get("/conversations/1e14ace4-7807-42a0-b542-9b99798526d2")
	.then((response) => setState(response.data));
	}, []);

	if (Object.keys(state).length === 0) {
	return <div>Loading</div>;
	}

	return (
	<div>
	<Conversation conversation={state.conversation} />
	<Question
	conversationId={state.id}
	question={state.questions[currentQuestion]}
	onCorrect={() => {
	if (currentQuestion < state.questions.length - 1) {
	setCurrentQuestion(currentQuestion + 1);
	}
	}}
	/>
	</div>
	);
	}

	ReactDOM.render(<Application />, document.getElementById("application"));
	</script>
	</head>
	<body>
	<div id="application"></div>
	</body>
	</html>
	const express = require("express");
	const app = express();
	const bodyparser = require("body-parser");

	const conversations = [
	{
	id: "1e14ace4-7807-42a0-b542-9b99798526d2",
	conversation: ["Hey man", "Hey whats up?", "Nothing much", "Oh thats cool"],
	questions: [
	{
	id: "ad97da94-09aa-4125-a377-42b7d0fbc939",
	question: "What was the first thing said?",
	answers: ["hey man", "hi", "hello", "heyooo"],
	},
	{
	id: "4e0d2a63-baa6-4a2a-b222-20ea038f5b32",
	question: "What was the second thing said?",
	answers: [
	"hey whats up?",
	"how are you?",
	"what is that?",
	"where am i?",
	],
	},
	{
	id: "0bb2ee33-10ee-4ca7-a6fc-2cedc6fef9e0",
	question: "What was the third thing said?",
	answers: [
	"nothing much",
	"i ate pizza",
	"i drank water",
	"i drank tea",
	],
	},
	{
	id: "d472b692-d6e9-4011-9e61-16d3f368600f",
	question: "What was the fourth thing said?",
	answers: [
	"oh thats cool",
	"oh i dont like that",
	"that tastes good",
	"that tastes bad",
	],
	},
	],
	},
	];

	app.use(express.static("public"));

	app.use(bodyparser.json());

	app.post("/answer", (request, response) => {
	const conversationId = request.body.conversationId;
	const questionId = request.body.questionId;
	const answer = request.body.answer;

	const conversationIndex = conversations.findIndex(
	(conversation) => conversation.id === conversationId
	);

	const questions = conversations[conversationIndex].questions;

	const questionIndex = questions.findIndex(
	(question) => question.id === questionId
	);

	response.json({
	correct:
	conversations[conversationIndex].questions[questionIndex].answers[0] ===
	answer,
	});
	});

	app.get("/conversations/:id", (request, response) => {
	response.json(
	conversations.find((conversation) => conversation.id === request.params.id)
	);
	});

	app.get("/converstation", (request, response) => {
	response.json(conversations);
	});

	app.listen(3000, () => console.log("Connected to port 3000"));