Bir örneğini yaptım, inceleyip kendine göre uyarlayabilirsin;
https://codepen.io/tayfunerbilen/pen/eYmMEPb

Html kodların;

<div class="words"></div>

<div id="result"></div>

<input type="text" id="input">

css kodların;

.words {
	border: 2px solid #aaa;
	border-radius: 20px;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	span {
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
		border-radius: 30px;
		font-size: 20px;
		margin-right: 10px;
		&.active {
			background: #eee;
		}
		&.correct {
			background: green;
			color: #fff;
		}
		&.incorrect {
			background: red;
			color: #fff;
		}
	}
}

input {
	margin-top: 20px;
	width: 400px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	border: 1px solid #ccc;
}

javascript kodların;

const words = ['tayfun', 'erbilen', 'prototurk', 'test', 'şeker', 'şey'];
const wordsBox = $('.words');
let input = $('#input');
let current = 0;

$.each(words, (key, word) => {
	wordsBox.append(`<span data-id='${key}'>${word}</span>`)
});

wordsBox.find('span:first').addClass('active');

input.on('keyup', function(e) {
	if (e.keyCode == 32){
		var elem = wordsBox
				.find('span')
				.eq(current);
		
		if ($.trim($(this).val()) == words[current]){
				elem
					.removeClass()
					.addClass('correct');
		} else {
			elem
				.removeClass()
				.addClass('incorrect');
		}
		current += 1;
		input.val('');
		
		if (current == words.length){
			finish();
		}
		
	}
});

function finish(){
	var correct = $('span.correct').length,
			incorrect = $('span.incorrect').length;
	$('#result').html('<b>Doğru:</b> ' + correct + '<br><b>Yanlış:</b> ' + incorrect);
}