Скрипты для изучения иностранных языков
Здравствуйте! Помогите реализовать небольшие программки на JavaScript без всяких библиотек. Дело втом, что я работаю репетитором по английскому и для того, чтобы сделать свои уроки не такими скучными и однообразными решил внедрить немного интерактивности. А именно: для лучшего и более увлекательного запоминания слов я сделал простенький слайдер картинок. Но мне нужно добавить туда поле ввода(инпут) для того чтобы написать туда то, что изображено на картинке. если введенное слово правильно, то ипоказывается след. картинка. а если не правильная то выходит сообщение.
P.S Я занимаюсь только версткой сайтов, знаю CSS, bootstrap, wordpress но к сожалению с Js отношения не сложились. Я могу на нём читать код или что-то изменить. Но самому написать не получается. Буду вам очень признателен ведь это не только для меня но и для подрастающего поколения. Заранее спасибо. |
Пьяный копирайтер,
Выложите пожалуйста ваш код слайдера. |
<style>
#main {
position:relative;
margin: 100px auto;
padding: 5px;
width: 660px;
height:360px;
background-color: lightgreen;
border: 5px solid green;
border-radius:15px;
}
#scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
border: 2px solid black;
border-radius:10px;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 70px;
font: 12pt arial,tahoma,sans-serif;
text-align: center;
background-color: red;
}
.left {
left:5px;
}
.right {
right:5px;
}
</style>
<script>
var slider = {
slides:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'],
frame:0,
set: function(image) {
document.getElementById("scr").style.backgroundImage = "url("+image+")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if(this.frame < 0) this.frame = this.slides.length-1;
this.set(this.slides[this.frame]);
},
right: function() {
this.frame++;
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
setInterval(function() {
slider.right();
},5000);
};
</script>
<body> <div id="main"> <button class="left" onclick="slider.left();"><</button> <div id="scr"></div> <button class="right" onclick="slider.right();">></button> </div> </body> |
Накосячил.
|
Пьяный копирайтер,
Только у Вас почему то не устанавливается сразу 1.jpg. Поэтому мотните в сторону. Ещё, наверное, тогда надо убрать setInterval. В общем, если сдвините на один раз вправо, то значение надо писать val2, берете значение из массива values соответсвующей картинке.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
<style>
#main {
position:relative;
margin: 100px auto;
padding: 5px;
width: 660px;
height:360px;
background-color: lightgreen;
border: 5px solid green;
border-radius:15px;
}
#scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
border: 2px solid black;
border-radius:10px;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 70px;
font: 12pt arial,tahoma,sans-serif;
text-align: center;
background-color: red;
}
.left {
left:5px;
}
.right {
right:5px;
}
input{
margin-left: 40%;
}
</style>
</style>
<body>
<div id="main">
<button class="left" onclick="slider.left();"><</button>
<div id="scr"></div>
<input id="answer" type="text"></input>
<input type="button" value="Следущий слайд" onclick="checkSlide()"></input>
<button class="right" onclick="slider.right();">></button>
</div>
</body>
</html>
<script>
var slider = {
slides:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'],
values:['val1', 'val2', 'val3', 'val4', 'val5'],
frame:0,
set: function(image) {
document.getElementById("scr").style.backgroundImage = "url("+image+")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if(this.frame < 0) this.frame = this.slides.length-1;
this.set(this.slides[this.frame]);
},
right: function() {
this.frame++;
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
function checkSlide(){
var currentImage = $('#scr').css('background-image');
var number = currentImage.split('/');
var numberImage1 = number[number.length-1].split('"');
var numberImage2 = numberImage1[0];
var count;
for(i=0; i<slider.slides.length; i++){
if(numberImage2 == slider.slides[i]){
count = i;
}
}
if ($('#answer').val() == slider.values[count]){
slider.right();
alert("выполнилось slider.right()");
} else {
alert("Неправильно, Д. Федор, ты бутерброд ешь!")
}
}
window.onload = function() {
};
</script>
|
Вот спасибо дружище, выручил. Осталось разобраться в чем я накосячил. Почему нормально не показывает. Никак не могу понять.
|
Пьяный копирайтер,
Ну потому что вы описали функцию init, но её не использовали). Добавьте до функции checkSlide() такую строку: slider.init();И будет вам счастье) :victory: |
Спасибо! Вот прям от души! Теперь буду заниматься оформлением. Расскажи где и как учился этому сложному языку.
|
Пьяный копирайтер,
Умел прогать на C++. Пришел на работу и здрасте) А так при помощи тут больше вообще разработку сайтов изучал . Здесь.Ну а если проблем с английским нету (ну а вы репетитор все дела) то вот ещё можно, но сам не пробывал. Ну и по сути язык не такой уж и сложный. Открываете firebug и мучаете мучаете, со временем, думаю все получится. Ну и конечно же этот чудесный форум, про него не забываем. Люди здесь на удивление добрые и отзывчивые, в отличие от форума php, где любят только носом тыкать в твою некомпентентность. |
| Часовой пояс GMT +3, время: 20:32. |