Hey
1.Questions and Answers are stored in DB
2. Questions are loaded via repeat row and answers are loaded as buttons repeat child
example page:
When i select answer to question 1, it does not stick when i select answer to question2 .
Meaning can NOT select answer for each question.
Please advice how to solve it
thank you!
The answer options look like they are buttons.
And the selection you are seeing is just focus indicator.
You should use a radio button list instead of button.
@sid thank you for your input,
I need each option to be visual with different color
example: ok - green, bad - red.
Displayed inline as buttons, like that:
so user clicks the color
the problem is that whole questions and answers are as single block, It does not let select answer for each question, canât seem to figure how to solve that,
Using radio buttons is the best solution as per @sidâs answer.
You can style the radio buttons as normal buttons using the following style rules
<style>
.questionaire {
margin: 10px;
}
.questionaire input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.questionaire label {
display: inline-block;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.questionaire label.green {
background-color: green;
color: white;
}
.questionaire label.orange {
background-color: orange;
}
.questionaire label.grey {
background-color: grey;
color: white;
}
.questionaire label.red {
background-color: red;
color: white;
}
.questionaire label:hover {
background-color: #dfd;
}
.questionaire input[type="radio"]:focus+label {
border: 2px dashed #444;
}
.questionaire input[type="radio"]:checked+label {
background-color: aqua;
color: black;
border-color: #4c4;
}
</style>
The html will look like
<form action="dmxConnect/api/questionaire.php" id="frmQuestionaire" is="dmx-serverconnect-form" dmx-on:success="notifies1.success('\'yes, you have done it.\'')">
<div class="col-12 mt-4 questionaire">
<p>1. What do you think of the WHO</p>
<input type="radio" name="who" id="who1" value="good" checked="true">
<label for="who1" class="green">Good</label>
<input type="radio" name="who" id="who2" value="fix">
<label for="who2" class="orange">Need Fixing</label>
<input type="radio" name="who" id="who3" value="nogood">
<label for="who3" class="grey">Not Good</label>
<input type="radio" name="who" id="who4" value="bad">
<label for="who4" class="red">Bad</label>
</div>
<div class="col-12 mt-4 questionaire">
<p>2. What do you think of NATO</p>
<input type="radio" name="nato" id="nato1" value="good" checked="true">
<label for="nato1" class="green">Good</label>
<input type="radio" name="nato" id="nato2" value="fix">
<label for="nato2" class="orange">Need Fixing</label>
<input type="radio" name="nato" id="nato3" value="nogood">
<label for="nato3" class="grey">Not Good</label>
<input type="radio" name="nato" id="nato4" value="bad">
<label for="nato4" class="red">Bad</label>
</div>
<div class="col-12 mt-4 questionaire">
<p>3. What do you think of the UN</p>
<input type="radio" name="un" id="un1" value="good" checked="true">
<label for="un1" class="green">Good</label>
<input type="radio" name="un" id="un2" value="fix">
<label for="un2" class="orange">Need Fixing</label>
<input type="radio" name="un" id="un3" value="nogood">
<label for="un3" class="grey">Not Good</label>
<input type="radio" name="un" id="un4" value="bad">
<label for="un4" class="red">Bad</label>
</div>
<div class="col-12 mt-5">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
The result where aqua coloured buttons are those that are selected
Nice code @ben 
One thing I would like to add here is instead of creating hex for the colors, you can style the labels as button using the Bootstrap classes btn btn-primary etc. You can play around with the style by directly writing classes in the properties section.
Also, to show an unchecked button, you can bind dynamic class like:
dmx-bind:btn-primary="radio.checked" dmx-bind:btn-outline-primary="!radio.checked"
@Atila This is just a rough code. If you are unable to figure it out, just share the code here & Iâll try to modify it for you.
I think there might also be an issue with the way you are binding the questions and answers. With correct repeats and binding, Wappler works flawlessly for such operations.
@Atila reached out to me regarding the grouping of the radio button answers, so Iâm going to post my response here for others.
The desired result is to have a series of questions, each with a series of radio button answers.
In the example below, there is a repeat âquestionsâ and a nested repeat âanswersâ. Iâve simply added a variable in the questions repeat that stores the $index of the repeat. Because radio buttons within a group need the same name attribute, we dmx-bind:name and append the âquestion_indexâ variable we created earlier.
<div id="questions" class="row" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.query1">
<dmx-value id="question_index" dmx-bind:value="$index"></dmx-value>
<div class="col">
<h5 dmx-text="question"></h5>
<div id="answers" class="form-check" dmx-repeat:repeat2="query2">
<input class="form-check-input" type="radio" value="" dmx-bind:name="'answer' + question_index.value" id="input1" name="input1" dmx-bind:value="answer_id">
<label class="form-check-label" for="input1" dmx-text="answer"></label>
</div>
</div>
</div>
hey @mebeingken
Thank you for your reply,
I have tried to follow the guide above, however
dmx-bind:name="âanswerâ + question_index.value"
does not seem to work properly.
please advice what did i do wrong
You have a < before dmx-bind:name which should be removed.
And if the warnings continue, you can use a similar approach to having a dynamic id attribute as well as name.
@mebeingken for multiple radio group inside a repeat children (for multi insert on SC, afterwards), if I change the names, how Wappler will receive these data on the server side?
Sorry, not understanding. 
Iâm assuming that in using radio buttons you want to group them using a common name so that only one may be selected at a time. That selected value then is presented to the server side just like any other input.
So then each group will have just one value at any one time.
