Multiple Choice Fade Effect Quiz

Asked

Viewed 54 times

3

In a multiple choice questionnaire (options 1 to 10), I’m trying to make the effect that the question gets low opacity at first, but when it receives the Focus or click, regardless of the question, it gets opacity 1. I haven’t been able to do it yet. I’m using radio buttom. Does anyone know how I can do?

Example:https://pt.surveymonkey.com/r/LYZL3KQ 

<form id="formulario" name="form" method="post">   
    <div id="quiz01">
        <div class="form-row">
            <div class="col">
                <p class="mb-2">1. O formato do <strong>Livro Digital</strong> melhorou a minha experiência de aprendizagem.</p>
            </div>
        </div>
        <div class="form-row mb-2">
            <div class="col">
                <div class="btn-group btn-group-toggle box-numeros" data-toggle="buttons"><label class="btn btn-light mr-2 border">1<input type="radio" class="opcao01" name="avaliacao01" value="1" /></label><label class="btn btn-light mx-2 border">2<input type="radio" class="opcao02" name="avaliacao01" value="2" /></label>
                    <label
                        class="btn btn-light mx-2 border">3<input type="radio" class="opcao03" name="avaliacao01" value="3" /></label><label class="btn btn-light mx-2 border">4<input type="radio" class="opcao04" name="avaliacao01" value="4" /></label><label class="btn btn-light mx-2 border">5<input type="radio" class="opcao05" name="avaliacao01" value="5" /></label>
                        <label
                            class="btn btn-light mx-2 border">6<input type="radio" class="opcao06" name="avaliacao01" value="6" /></label><label class="btn btn-light mx-2 border">7<input type="radio" class="opcao07" name="avaliacao01" value="7" /></label><label class="btn btn-light mx-2 border">8<input type="radio" class="opcao08" name="avaliacao01" value="8" /></label>
                            <label
                                class="btn btn-light mx-2 border">9<input type="radio" class="opcao09" name="avaliacao01" value="9" /></label><label class="btn btn-light ml-2 border">10<input type="radio" class="opcao10" name="avaliacao01" value="10" /></label></div>
            </div>
        </div>
        <div class="form-row mb-5">
            <div class="col">
                <p class="mb-0 texto-form-cinza">Discordo plenamente</p>
            </div>
            <div class="col">
                <p class="text-right mb-0 texto-form-cinza">Concordo plenamente<br /></p>
            </div>
        </div>
    </div>
    <div id="quiz02">
        <div class="form-row">
            <div class="col">
                <p class="mb-2">2. A função <strong>Notas e Destaques</strong><img class="imagem" src="https://cm-kls-content.s3.amazonaws.com/DESEN_WEBAULA/BOOTSTRAP/img/formulario/icones-02.png" /> melhora o meu processo de estudo.<br /></p>
            </div>
        </div>
        <div class="form-row mb-2">
            <div class="col">
                <div class="btn-group btn-group-toggle box-numeros" data-toggle="buttons"><label class="btn btn-light mr-2 border">1<input type="radio" class="opcao01" name="avaliacao02" value="1" /></label><label class="btn btn-light mx-2 border">2<input type="radio" class="opcao01" name="avaliacao02" value="2" /></label>
                    <label
                        class="btn btn-light mx-2 border">3<input type="radio" class="opcao01" name="avaliacao02" value="3" /></label><label class="btn btn-light mx-2 border">4<input type="radio" class="opcao01" name="avaliacao02" value="4" /></label><label class="btn btn-light mx-2 border">5<input type="radio" class="opcao01" name="avaliacao02" value="5" /></label>
                        <label
                            class="btn btn-light mx-2 border">6<input type="radio" class="opcao01" name="avaliacao02" value="6" /></label><label class="btn btn-light mx-2 border">7<input type="radio" class="opcao01" name="avaliacao02" value="7" /></label><label class="btn btn-light mx-2 border">8<input type="radio" class="opcao01" name="avaliacao02" value="8" /></label>
                            <label
                                class="btn btn-light mx-2 border">9<input type="radio" class="opcao01" name="avaliacao02" value="9" /></label><label class="btn btn-light ml-2 border">10<input type="radio" class="opcao01" name="avaliacao02" value="10" /></label></div>
            </div>
        </div>
        <div class="form-row mb-5">
            <div class="col">
                <p class="mb-0 texto-form-cinza">Discordo plenamente</p>
            </div>
            <div class="col">
                <p class="text-right mb-0 texto-form-cinza">Concordo plenamente<br /></p>
            </div>
        </div>
    </div>   
</form>

jquery css

  • Ask the question a [mcve].

  • Look at the answer to that question instead of checked would be a hover in your case. https://answall.com/questions/376161/angular-7-mudar-a-cor-da-checkbox-ap%C3%b3s-mark-as-checked

1 answer

1


From what I understand, just get the main div of the group of radiobuttons with id that begins with quiz and change the opacity to 1.

For example, when you click on a radio, you search for the div com .closest():

.closest("[id^=quiz]")

Where the id starts with the word "quiz", because each question div has in common the id’s that start with that word: quiz01, quiz02 etc., and the operator ^= search the element whose attribute starts with the specified word, in this case, "quiz".

To get the radio click, it’s the same thing, only using the attribute class:

$(":radio[class^=opcao]").on("click", function(){...

Take the example:

$(":radio[class^=opcao]").on("click", function(){
   $(this)                 // elemento radio clicado
   .closest("[id^=quiz]")  // busca o primeiro ancestral cujo id começa com "quiz"
   .css("opacity", "1");   // altera a opacidade
});
[id^=quiz]{
   opacity: .3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formulario" name="form" method="post">   
    <div id="quiz01">
        <div class="form-row">
            <div class="col">
                <p class="mb-2">1. O formato do <strong>Livro Digital</strong> melhorou a minha experiência de aprendizagem.</p>
            </div>
        </div>
        <div class="form-row mb-2">
            <div class="col">
                <div class="btn-group btn-group-toggle box-numeros" data-toggle="buttons"><label class="btn btn-light mr-2 border">1<input type="radio" class="opcao01" name="avaliacao01" value="1" /></label><label class="btn btn-light mx-2 border">2<input type="radio" class="opcao02" name="avaliacao01" value="2" /></label>
                    <label
                        class="btn btn-light mx-2 border">3<input type="radio" class="opcao03" name="avaliacao01" value="3" /></label><label class="btn btn-light mx-2 border">4<input type="radio" class="opcao04" name="avaliacao01" value="4" /></label><label class="btn btn-light mx-2 border">5<input type="radio" class="opcao05" name="avaliacao01" value="5" /></label>
                        <label
                            class="btn btn-light mx-2 border">6<input type="radio" class="opcao06" name="avaliacao01" value="6" /></label><label class="btn btn-light mx-2 border">7<input type="radio" class="opcao07" name="avaliacao01" value="7" /></label><label class="btn btn-light mx-2 border">8<input type="radio" class="opcao08" name="avaliacao01" value="8" /></label>
                            <label
                                class="btn btn-light mx-2 border">9<input type="radio" class="opcao09" name="avaliacao01" value="9" /></label><label class="btn btn-light ml-2 border">10<input type="radio" class="opcao10" name="avaliacao01" value="10" /></label></div>
            </div>
        </div>
        <div class="form-row mb-5">
            <div class="col">
                <p class="mb-0 texto-form-cinza">Discordo plenamente</p>
            </div>
            <div class="col">
                <p class="text-right mb-0 texto-form-cinza">Concordo plenamente<br /></p>
            </div>
        </div>
    </div>
    <div id="quiz02">
        <div class="form-row">
            <div class="col">
                <p class="mb-2">2. A função <strong>Notas e Destaques</strong><img class="imagem" src="https://cm-kls-content.s3.amazonaws.com/DESEN_WEBAULA/BOOTSTRAP/img/formulario/icones-02.png" /> melhora o meu processo de estudo.<br /></p>
            </div>
        </div>
        <div class="form-row mb-2">
            <div class="col">
                <div class="btn-group btn-group-toggle box-numeros" data-toggle="buttons"><label class="btn btn-light mr-2 border">1<input type="radio" class="opcao01" name="avaliacao02" value="1" /></label><label class="btn btn-light mx-2 border">2<input type="radio" class="opcao01" name="avaliacao02" value="2" /></label>
                    <label
                        class="btn btn-light mx-2 border">3<input type="radio" class="opcao01" name="avaliacao02" value="3" /></label><label class="btn btn-light mx-2 border">4<input type="radio" class="opcao01" name="avaliacao02" value="4" /></label><label class="btn btn-light mx-2 border">5<input type="radio" class="opcao01" name="avaliacao02" value="5" /></label>
                        <label
                            class="btn btn-light mx-2 border">6<input type="radio" class="opcao01" name="avaliacao02" value="6" /></label><label class="btn btn-light mx-2 border">7<input type="radio" class="opcao01" name="avaliacao02" value="7" /></label><label class="btn btn-light mx-2 border">8<input type="radio" class="opcao01" name="avaliacao02" value="8" /></label>
                            <label
                                class="btn btn-light mx-2 border">9<input type="radio" class="opcao01" name="avaliacao02" value="9" /></label><label class="btn btn-light ml-2 border">10<input type="radio" class="opcao01" name="avaliacao02" value="10" /></label></div>
            </div>
        </div>
        <div class="form-row mb-5">
            <div class="col">
                <p class="mb-0 texto-form-cinza">Discordo plenamente</p>
            </div>
            <div class="col">
                <p class="text-right mb-0 texto-form-cinza">Concordo plenamente<br /></p>
            </div>
        </div>
    </div>   
</form>

If you want a transition effect, you can use:

.animate({opacity: 1});

In place of:

.css("opacity", "1");

  • Sam in the casodo his he takes the radio, in mine he gets active the label how I can change?

  • Try this: $(".box-numeros label").on("click", function(){ instead: $(":radio[class^=opcao]").on("click", function(){

  • It worked, now I need to make it gets opacity 1 the question as the scroll scroll knows how I can do it?

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.