Tengo un formulario, donde se realizar un test y estoy intentando hacer (en jQuery para no refrescar la página) que según las opciones escogidas me aparezca un resultado u otro y se muestre un mensaje segun las opciones correctas, por ejemplo de 1 a 2 acertadas un mensaje, 3 aciertos otro mensaje y de 4 a 5 otro mensaje, y que este se muestre en un div creado llamado id="resultado".
La verdad es que no se por donde empezar, os dejo el codigo del formulario por si alguien me puede ayudar, le estaría muy agradecido :)
Código HTML:
<form class="ac-custom ac-radio ac-fill" autocomplete="off"> <h5>Pregunta 1</h5> <ul> <li><input id="r1" name="r1" type="radio" value="1"><label for="r1">Opción 1</label></li> <li><input id="r2" name="r1" type="radio" value="0"><label for="r2">Opción 2</label></li> <li><input id="r3" name="r1" type="radio" value="0"><label for="r3">Opción 3</label></li> <li><input id="r4" name="r1" type="radio" value="0"><label for="r4">Opción 4</label></li> <li><input id="r5" name="r1" type="radio" value="0"><label for="r5">Opción 5</label></li> </ul> <hr /> <h5>Pregunta 2</h5> <ul> <li><input id="r6" name="r2" type="radio" value="1"><label for="r6">Opción 1</label></li> <li><input id="r7" name="r2" type="radio" value="0"><label for="r7">Opción 2</label></li> <li><input id="r8" name="r2" type="radio" value="0"><label for="r8">Opción 3</label></li> <li><input id="r9" name="r2" type="radio" value="0"><label for="r9">Opción 4</label></li> <li><input id="r10" name="r2" type="radio" value="0"><label for="r10">Opción 5</label></li> </ul> <hr /> <h5>Pregunta 3</h5> <ul> <li><input id="r11" name="r3" type="radio" value="1"><label for="r11">Opción 1</label></li> <li><input id="r12" name="r3" type="radio" value="0"><label for="r12">Opción 2</label></li> <li><input id="r13" name="r3" type="radio" value="0"><label for="r13">Opción 3</label></li> <li><input id="r14" name="r3" type="radio" value="0"><label for="r14">Opción 4</label></li> <li><input id="r15" name="r3" type="radio" value="0"><label for="r15">Opción 5</label></li> </ul> <hr /> <h5>Pregunta 4</h5> <ul> <li><input id="r16" name="r4" type="radio" value="1"><label for="r16">Opción 1</label></li> <li><input id="r17" name="r4" type="radio" value="0"><label for="r17">Opción 2</label></li> <li><input id="r18" name="r4" type="radio" value="0"><label for="r18">Opción 3</label></li> <li><input id="r19" name="r4" type="radio" value="0"><label for="r19">Opción 4</label></li> <li><input id="r20" name="r4" type="radio" value="0"><label for="r20">Opción 5</label></li> </ul> <hr /> <h5>Pregunta 5</h5> <ul> <li><input id="r21" name="r5" type="radio" value="1"><label for="r21">Opción 1</label></li> <li><input id="r22" name="r5" type="radio" value="0"><label for="r22">Opción 2</label></li> <li><input id="r23" name="r5" type="radio" value="0"><label for="r23">Opción 3</label></li> <li><input id="r24" name="r5" type="radio" value="0"><label for="r24">Opción 4</label></li> <li><input id="r25" name="r5" type="radio" value="0"><label for="r25">Opción 5</label></li> </ul> <br /> <button type="submit" class="cyan-btn med-btn pull-right">Enviar</button> </form>