• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

A big javascript question.

IndigoClaudia

The Fool
Pronoun
Ask; Try She/Her
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?
 
Last edited:

Murkrow

Says "also" and "or something" a lot
Pronoun
he
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]; ...}.
 
Last edited:

IndigoClaudia

The Fool
Pronoun
Ask; Try She/Her
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!
 

Attachments

Top