A big javascript question.

IndigoClaudia · Dec 2, 2020

Hi! I've been learning a bit more javascript, but i still don't know how i would do something, and i want to know how to do something for a pretty big project.

So, the project is basically, there's a quiz. But instead of a normal quiz, it outputs a code.

So as an example, there would be 3 options:

Option one, which outputs 1

Option two, which outputs 2

Option three, which outputs 3

One you've selected your options, it outputs a code which you can copy and paste. I want something like that, except for there are like 20+ questions with lots and loooots of options.

The second part is, once you've gotten your code, you can input it into a text box, and it will show you which options were picked.

The idea is that you can make codes by filling out the quiz, and share codes with people, who can put it through the "decoder" to learn more about you.

Does anyone know just the basic idea of how to do something like that?

Murkrow · Dec 3, 2020

I'm not the best with working with forms in javascript but here's something quick which should do generally what you want:

HTML:

<html>
<head>
    <script type="text/javascript" src="quiz.js"></script>
</head>

<body>
<form>
  <fieldset id="question1">
    <input type="radio" value="a" name="question1">
    <label for="a">Red</label><br>
    <input type="radio" value="b" name="question1">
    <label for="b">Orange</label><br>
    <input type="radio" value="c" name="question1">
    <label for="c">Blue</label><br>
  </fieldset>

  <fieldset id="question2">
    <input type="radio" value="a" name="question2">
    <label for="a">Cat</label><br>
    <input type="radio" value="b" name="question2">
    <label for="b">Dog</label><br>
    <input type="radio" value="c" name="question2">
    <label for="c">Fish</label><br>
  </fieldset>
</form>

<button onClick="getCode()">Get Code</button>
<br/>
<br/>


<input type="textbox" id="codeBox"></input>
<button onClick="interpretCode()">Get Answers</button>

<pre id="output">
</pre>
</body>
</html>

And quiz.js looks like this:

JavaScript:

function getCode() {
    var form = document.querySelector("form");
    var output = document.querySelector("#output");
  
    var data = new FormData(form);
    var code = "";
    for (entry of data) {
      code += entry[1];
    };
    output.innerText = code;
}


function interpretCode() {
    var code = document.querySelector("#codeBox").value;
    var output = document.querySelector("#output");
  
    result = "";
  
    for (i = 0 ; i < code.length ; i++ ) {
        var question = document.querySelector("#question"+(i+1)); //first character of the code corresponds to the first question's answer etc.
      
        for (item of question.childNodes) {
            if (item.nodeName == "LABEL" && item.getAttribute("for") == code[i]) { //get the answer text
                result += "Answer to question " + (i+1) + ": " + item.innerText;
                result += "\n";
            }
        }
    }
  
    output.innerText = result;
  
}

If there's anything there you don't understand, let me know.
There are a few limitations of what I've currently done. For example it doesn't check that the code you entered is a valid code.
The number of answers for each question is limited to the number of possible single characters, which hopefully should be enough for your purposes.

"for (x of y)" is relatively new and might not work in older browsers though; you can try to replace it with either
for (index in y) { x = y[index]; ... } or for (var i = 0 ; i < y.length ; i++ ) {x = y[i]; ...}.

IndigoClaudia · Dec 4, 2020

Perfect, that does the job well enough... as the frameworks for everything. Don't mind what the quiz is about by the way -it's hard to explain and something i'd like to explain to TCoD a bit more formally someday- and so i was able to get it to work for the most part, but there are a couple things i need to figure out how to do.

-How to get the decoder to work
-How to add things to the code that are always there, and can't be changed by questions (Example: at the end of section one it adds a "|" just to make it seperate from everything else)
-Actually, i think that's it for now. Thank you for your help!

A big javascript question.

IndigoClaudia

The Fool

Murkrow

Says "also" and "or something" a lot

IndigoClaudia

The Fool

Attachments