Nikita Titov

1. Используй счетчик ( обычная числовая переменная )
2. Чтобы не перебирать варианты Соль соль СоЛь и т.д..... переводи в нижний регистр функцией toLowerCase() и всегда будет соль!

var quest = 0;
var ansv;
alert("Отгадайте ещё три загадки.");
  ansv = prompt("На каком языке говорят молча?").toLowerCase();
  if (ansv == "язык жестов" || ansv == "жестов") 
     quest++;
  ansv = prompt("В каком городе спрятались мужское имя и сторона света?").toLowerCase();
  if (ansv == "владивосток") 
  	quest++;
 ansv = prompt("Какая нота и продукт называются одинаково?").toLowerCase();
  if (ansv ==  "соль") 
  	quest++;
	alert("Вы отгадали "+ quest+ " загадок!");

При прокрутке - можно воспользоваться очень простым скриптом

<script type="text/javascript">
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('#ten-hidden').addClass("sticky");
  }
  else{
    $('#ten-hidden').removeClass("sticky");
  }
if ($(this).scrollTop() > 1){  
    $('#sanremo-logo').addClass("sticky");
  }
  else{
    $('#sanremo-logo').removeClass("sticky");
  }
});
</script>

Этот скрипт добавляет class "sticky" элементу с id "sanremo-logo", пример - sanremo-pizza.com появление тени при прокрутке страницы на 1 пиксель, скорость появления можно задать на css transition: all 0.3s;

https://www.youtube.com/watch?v=zrGgSDVzpQI

Не обязательно, можно поправить .htaccess прописав:
AddType application/x-httpd-php .php .htm .html
Тогда в html сможет выполнятся php код.
Ну и конечно все зависит от сервера, вполне возможно уже все работает

Это сильно зависит от настройки вашего сервера. Для проверки напишите в файле index.html такой код:
<?php phpinfo(32); ?>

Если после обновления страницы вы, помимо формы, увидите этот код - значит надо переименовывать. Если что-то другое - то не надо.

wow.js + animate.css

Animate.css для анимаций.

Для того чтобы анимация воспроизводилась, когда блок попадает видимую область браузера, попробуйте плагин jQuery-viewport-checker

Не много не понял какого эффекта вы хотите добиться, но посмотрите (html + css)
Пример

Вот плагин

;(function ( $, window, document ) {
	"use strict";

	var viewport = 0,
    	wheight = $(window).height(),
    	scrollTop;

    $.fn.viewport = function ( options ) {
        options = $.extend( {}, $.fn.viewport.options, options );

        $.fn.viewport.options.items = this;

        if (!$.fn.viewport.options.elements.length)
		{
			$.fn.viewport.calculate();
		}

		if ($.fn.viewport.options.elements.length)
		{
			$.fn.viewport.animate();
	    }

	    $(window).scroll(function(){
			$.fn.viewport.animate();
		});

	    $(window).resize(function(){
			$.fn.viewport.calculate();
		});
    };

    $.fn.viewport.options = {
        items: {},
        elements: {}
    };

	$.fn.viewport.calculate = function() {
		$.fn.viewport.options.elements = $.fn.viewport.options.items.map(function(){
			if ($(this).length) {
				return $(this);
			}
        });
	}

    $.fn.viewport.animate = function() {
		scrollTop = $(window).scrollTop();

		$.fn.viewport.options.elements.map(function(){
			viewport = scrollTop + wheight;

	        if ($(this).offset().top <= viewport && !$(this).hasClass('active'))
	        {
	        	$(this).addClass('active');
	        }
	    });
	}

})( jQuery, window, document );

Запуск плагина
$('.fade-in').viewport();

Пример разметки

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

<div class="fade-in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nulla, ipsam odit minus, adipisci maxime repellendus tenetur reprehenderit, suscipit ab voluptatem magni. Asperiores in labore aliquam provident officiis, dolorum fuga!</div>

Css

.fade-in {
	opacity: 0;
	transform: scale(0) rotate(-40deg);
	transition: opacity 0.7s, transform 0.5s;
}

.fade-in.active {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

vista1x правильно говорит. Поиск делается по бд. SELECT * FROM table WHERE title LIKE % ключевоеслово%

какая цель у этого? Ведь вы цветом полностью закроете картинку.
Но а вообще, чтоб не плодить лишние теги, воспользуйся псевдоэллементом ::before у блока с фоном-цветом.
Этому псевдоэллементу задайте блочное отображение и свой фон-картинку. По сути будет то же что и с двумя блоками, как в ответах выше, но без лишних тегов. То есть меньше кода в html

background-image всегда лежит поверх background-color

background-image может иметь несколько слоёв картинок:

body{
  background-image: url('one.png'), url('two.png');
}

Как сказали archelon и Валерий, сделать один контейнер поверх другого:
codepen.io/S-ed/pen/QbXPaG

2 дива с разными z-index. В переднем фон - в заднем - картинка. Если решит проблему - могу накидать пример..

наверное, только так

<div class="background_image">
  <div class="background_color">
    ... 
 </div>
</div>

Вашу задачу нужно разделить на 3:
1) отображение картинок в одной секции
2) переключение между ними по какому-то событию
3) анимация переключения

1. Отображение картинок в одной секции
Запихнуть несколько картинок в один блок можно разными способами. Я предпочитаю следующий:

• создается контейнер нужного размера
  
• внутри размещаются контейнеры для изображений, которые позиционируются абсолютно относительно основного. Таким образом, они получаются такого же размера, как и основной, и размещаются друг под другом.
  
• С помощью свойства background-size: cover устанавливаются необходимые изображения в качестве фона во внутренних контейнерах. Это даст нам автоматически масштабированные и подрезанные изображения по размеру контейнеров.
  

Таким образом, мы имеем несколько слоев с фоновыми картинками.

2. Переключение между картинками
Тут все достаточно просто. Скрываем по умолчанию все, отображаем одну с помощью дополнительного класса.
А дальше используем наш любимый js, чтобы управлять дополнительным классом.

Имеем галерею такой структуры:

<div class="gallery">
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>         
</div>

По клику на галерею будем (с помощью jQuery):

1. получать активный элемент
   
2. получать следующий за ним. Если следующего нет - переходить к первому
   
3. у активного класс убирать, следующему добавлять
   

$('.gallery').click(function() {
    var $this = $(this);
    
    var $active = $this.find('.slide.active');    
    var $next   = $active.next();
    if (!$next.length) {
        $next = $this.find('.slide:first');
    }
    
    $active.removeClass('active');
    $next.addClass('active');
});

3. Анимация
Анимацию можно сделать как с помощью JS, так и с помощью CSS.

CSS:

• устанавливаем для активного контейнера прозрачность 1 (непрозрачный)
  
• устанавливаем для остальных прозрачность 0 (абсолютно прозрачный)
  
• задаем анимацию для переключения между этими режимами с помощью transition
  

.gallery .slide {
    opacity: 0;
    transition: opacity 1s;
}

.gallery .slide.active {
    opacity: 1;
}

В итоге получаем Fiddle
Ну и одна из самых популярных jQuery-библиотек для галерей с кучей разных эффектов: www.jssor.com

В вашем случае лучше использовать именно поиск от Гугла или Яндекса.
https://cse.google.com/
https://site.yandex.ru/

Обычно поиск производится по данным из БД, а у вас, судя по всему, её нет.