JS/jquery input text kolorowy border

Witam, robię coś typu test w opraty na JS/jQuery

function sprawdz() {
var s1 = document.getElementById('a1').value == '80';
var s2 = document.getElementById('a2').value == 'dom' ;
if( s1 && s2){
 alert('Dobrze!');
 }
else {
alert('Żle! Przeczytaj jeszcze raz!');
 window.location.hash='#start';
}
}

<form name="taknie" action="javascript:void(0);">
<b>Odpowiedz na pytania</b>
1. Pytanie 2 <input type="text" id="a1">
2. Pytanie 2 <input type="text" id="a2"> (easy).
<input type="submit" onClick="sprawdz()">
</form>

Chodzi o to że w przypadku alertu źle, po dorobieniu else if'ów, pola input z dobrą odpowiedzią zmieniało by na zielone obramowanie, a ze złą na czerwone. jak to zrobić?

Po pierwsze mam nadzieje, że nie ma odpowiedzi widocznych w kodzie tak jak u Ciebie?
Po drugie nie rozumiem dokładnie działania. Bo chcesz by dobre pola były na zielono, a złe na czerwono - w kodzie zrobiłeś natomiast sprawdzanie obu pól naraz.

Ja bym zrobił tak:

<form name="taknie">
<b>Odpowiedz na pytania:</b>
1. Pytanie 1 <input type="text" data-id="a1">
2. Pytanie 2 <input type="text" data-id="a2"> (easy).
<input type="button" id="check" value="Sprawdź odpowiedzi">
</form>

Kod jQuery:

$(document).ready(function()
{
  $('#check').click(function(){
      $('form input[type="text"]').each(function(){
            var id = $(this).attr('data-id');
            // tutaj dodaj kod, który pobiera poprawną odpowiedź dla danego pola input i zapisz ją jako np.: var correct
            if($(this).val() == correct)
            {
                  $(this).css('border-color', '#00ff00');      // green
            } else {
                  $(this).css('border-color', '#ff0000');      // red
            }
      });
  });
});

Pisałem z głowy, więc mogą być błędy. Sprawdź i poucz się trochę jQuery - w nim pisze się inaczej niż w czystym JS, bo masz wiele uproszczeń.

O to właśnie mi chodziło, teraz kolejne pytanie jak mógłbym zrobić odpowiedzi na zasadzie np, tablicy, gdzie kolejno data-id a1,a2,a3... odpowiadało by np [tak,dobrze,nie,źle]

Zrobiłem coś na zasadzie

 $(document).ready(function()
{
  $('#sprawdzenie').click(function(){
      $('form input[type="text"]').each(function(){
            var id = $(this).attr('data-id');
            // tutaj dodaj kod, ktory pobiera poprawna odpowiedz dla danego pola input i zapisz ja jako np.: var correct
			var Todp = [ '0','1','2','3',... ];
			
			var correct = Todp[$(this).attr('data-id')];
            if($(this).val() == correct )
            {
                  $(this).css('border-color', '#00ff00');      // green
            } else {
                  $(this).css('border-color', '#ff0000');      // red
            }
			
			
      });
  });
});

i sprawuje się dobrze, mam jednak inny problem z którym borykam się już dłuższy czas, i zastanawiam się czy jest to w ogóle możliwe, chodzi mi o łączenie nazw zmiennych.
chodzi mi np o zapętlanie. jest zmiennaX, powiedzmy że mam pętle while(i<10), i czy mogę zrobić coś na zasadzie zmienna.i / zmienna+i i w jaki sposób ponieważ próbowałem w każdy możliwy i wywalało błędy w konsoli

chodzi mi np o zapętlanie. jest zmiennaX, powiedzmy że mam pętle while(i<10), i czy mogę zrobić coś na zasadzie zmienna.i / zmienna+i i w jaki sposób ponieważ próbowałem w każdy możliwy i wywalało błędy w konsoli

właśnie po to powstały tablice, użyj tablic