EN в Twitter EN В Контакте EN в Facebook

Олимпийка 2.0

 

PS: Все примеры внизу написаны не в 1 строчку, для вашего понимания и для того, чтобы можно было скопировать код и вставить его, достаточно при создании задания, убрать галку для "Включить автоперенос строк".

 

А теперь обо всем по порядку :)


СОЗДАНИЕ ОЛИМПИЙКИ

1. Подключаем скрипты.

Стили:

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

Основной код для олимпийки:

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

2. Обертка для олимпийки.

В этот div-обертку (ниже) будет добавляться будущая таблица с олимпийкой.

<div class='olymp_wrapper'></div>

Обертки задают тип ячеек, для: бонусов и секторов. Также можно создать олимпийку наоборот, от одного сектора ко всем, или создать олимпийку бабочку.

 

PS: Если в задании 1-а олимпийка для бонусов, тогда сектора могут быть отображены на странице и работать как обычно.

 

Примеры ниже:

- Ниже будет создана олимпийка для бонусов:

<div class='olymp_wrapper' data-type='bonus'></div>

аналогично

<div class='olymp_wrapper'></div>

 

- Олимпийка для секторов:

<div class='olymp_wrapper' data-type='sector'></div>

 

- Олимпийка в обратном порядке (от одного сектора ко всем) для бонусов:

<div class='olymp_wrapper' data-type='bonus' data-layout='reverse'></div>


- Олимпийка бабочка для секторов:

Нумерация в бабочке идет от краев в середну.

 

<div class='olymp_wrapper' data-type='sector' data-layout='butterfly'></div>

Здесь финальный сектор #13 должен быть объединением 4-х ячеек: #9, #10, #11, #12. Для олимпийки с объединением 3-х ячеек в одну, финальный сектор должен быть объединением 6-и ячеек.

olymp_2_0-24_butterfly_2.jpg

 

<div class='olymp_wrapper' data-type='sector' data-layout='butterfly_2'></div>

Здесь финальный сектор #15 должен быть объединением 2-х ячеек: #13, #14. Для олимпийки с объединением 3-х ячеек в одну, вначале будут объеденены 3-и ячейки в 1 с каждой стороны, а финальная так же будет получена из 2-х.

olymp_2_0-23_simple_butterfly.jpg

 

- Олимпийка для ШТУРМОВОЙ игры:

<div class='olymp_wrapper' data-id='msh1'></div>

 

3. Генерация олимпийки.

Ниже будет создана олимпийка для 8 стартовых секторов, с объединением 2-х ячеек.

<script>createSimpleOlymp()</script>

аналогично

<script>createSimpleOlymp(8)</script>


Если мы хотим создать олимпийку с другим количеством стартовых секторов (не 8), тогда просто указываем любое число кратное 2-м.

Например, ниже будет создана олимпийка с 1024 стартовыми секторами:

<script>createSimpleOlymp(1024)</script>

 

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

Например, ниже будет создана олимпийка с 9-ю стартовыми секторами.

<script>createSimpleOlymp(9, 3)</script>


Так же можно создать олимпийку и с объединением 4-х ячеек в 1-у и т.д.

4. Две олимпийки в одном задании.

Для этого нам нужны 2-е div-обертки разного типа, для: бонусов и секторов. И две генерации олимпийки. Номера олимпиек определяются их добавлением в задании.

Например, ниже будут созданы 2-е олимпийки, для: бонусов и секторов. 1-я олимпийка для бонусов, 2-я - для секторов. Потому что 1-я div-обертка для бонусов, а за ней идет 2-я - для секторов. Во 2-ой генерации createSimpleOlymp(9, 3, 2), мы должны указать номер олимпийки = 2.

<div class='olymp_wrapper'></div>

<div class='olymp_wrapper' data-type='sector'></div>

 

<script>

createSimpleOlymp(8)

createSimpleOlymp(9, 3, 2)

</script>

иначе этот код выглядит так (ниже)

<div class='olymp_wrapper' data-type='bonus'></div>

<div class='olymp_wrapper'data-type='sector'></div>

 

<script>

createSimpleOlymp(8, 2, 1)

createSimpleOlymp(9, 3, 2)

</script>


ОБНОВЛЕНИЕ ОЛИМПИЙКИ

1. Обновление 1-ой ячейки.

Иногда в олимпийках необходимо добавлять текст или картинки, для этого нужно добавить новую строчку в задание, после создания олимпийки.

ВАЖНО: добавлять текст или картинки нужно в кавычках: одинарных или двойных.

Например, код (ниже) обновляет 1-ю ячейку на текст = вопрос, в 1-ой олимпийке.

<script>
updateCellInOlympById(1, 'вопрос', 1)
</script>

Например, код (ниже) обновляет 10-ю ячейку на картинку с url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Red_Hat_logo.svg/220px-Red_Hat_logo.svg.png', во 2-ой олимпийке.

<script>
updateCellInOlympById(10, 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Red_Hat_logo.svg/220px-Red_Hat_logo.svg.png', 2)
</script>

 

2. Обновление нескольких ячеек.

Если вам надо обновить несколько ячеек или всю олимпийку, вам нужно воспользоваться другой строчкой (ниже).

Например, код (ниже) обновляет 5-ть ячеек на тексты: вопрос 1, вопрос 2, вопрос 3, вопрос 4, вопрос 5, c 1-ой ячейки, в 1-ой олимпийке.

<script>
updateCellsInOlymp(['вопрос 1', 'вопрос 2', 'вопрос 3', 'вопрос 4', 'вопрос 5'], 1, 1)
</script>

 

Другой пример, код (ниже) обновляет 3-и ячейки на тексты: вопрос 1, вопрос 2, вопрос 3, c 5-ой ячейки, в 1-ой олимпийке.

<script>
updateCellsInOlymp(['вопрос 1', 'вопрос 2', 'вопрос 3'], 5, 1)
</script>

 

ЗАГРУЗКА ЗАДАНИЙ БОНУСОВ В ОЛИМПИЙКУ

Для бонусной олимпийки, вы можете задать значения ячеек через текст бонусов. Можно добавлять: текст или ссылку на картинку. В случае с пустым бонусный заданием, будут пустые значения в ячейках олимпийки. В таком случае, весь блок с бонусами будет скрыт. Для загрузки заданий из бонусов в олимпийку используем следущий код (ниже):

<script>
loadBonusesInOlymp()
</script>

olymp_2_0-25_load_bonus_4.jpg

 

Если, в задании 2-е олимпийки, и бонусная олимпийка идет 2-ой, тогда в функции в параметрах пишем номер олимпийки = 2.

<script>
loadBonusesInOlymp(2)
</script>

 

ОШИБКИ И ПРЕДУПРЕЖДЕНИЯ ОБ ОЛИМПИЙКАХ

Шаг вправо, шаг влево - расстрел! А если серьезно, использование олимпиек будет проверено, и если что-то неправильно, вы получите сообщение, что не так.

Ошибки в заданиях и превью увидит только автор. Пример, ниже:


Предупреждения в сценарии помогут проверить заполненность всех секторов и дублирующие значения в олимпийке (эта проверка поможет в больших олимпийках).

Если вы сделали все правильно, то вы не увидите ошибок и предупреждений (выше).

 

РАБОТА ОЛИМПИЙКИ

1. Олимпийка для секторов.

Здесь без изменений. Добавляем олимпийку и добавляем столько секторов, сколько ячеек в олимпийке.

Блок с секторами над заданием отображаться не будут.

olymp_2_0-21_olymp_sector.jpg


2. Олимпийка для бонусов.

Для бонусной олимпийки, нам необходимо прописать "Подсказки" в бонусах, именно они будут добавлены в олимпийку.

olymp_2_0-22_olymp_b_1.jpg

olymp_2_0-22_olymp_b_2.jpg

 

3. Олимпийка для бонусов с подгрузкой текста бонусов в олимпийку.

Для бонусной олимпийки, вы можете задать значения ячеек через текст бонусов. Можно добавлять: текст или ссылку на картинку. В случае с пустым бонусный заданием, будут пустые значения в ячейках олимпийки. В таком случае, весь блок с бонусами будет скрыт.
olymp_2_0-25_load_bonus_3.jpg

 

Игроки увидять:

olymp_2_0-25_load_bonus_1.jpg

 

Бонусы, которые будут спрятаны от игроков:

olymp_2_0-25_load_bonus_2.jpg

 

3. Олимпийка для ШТУРМОВОЙ игры с подгрузкой текста бонусов в олимпийку.

Важно добавить уникальный data-id для каждой олимпийки, и указать этот id, во всех функциях

Пример внизу.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div data-id='shturm_olymp_1' class='olymp_wrapper'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>

createSimpleOlymp(4, 2, 'shturm_olymp_1')

 

updateCellsInOlymp(['текст', 'текст', 'текст'], 1, 'shturm_olymp_1')

updateCellInOlympById(1, 'вопрос 1', 'shturm_olymp_1')
loadBonusesInOlymp('shturm_olymp_1')

</script>

 


ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ

PS: Все примеры внизу написаны не в 1 строчку, для вашего понимания и для того, чтобы можно было скопировать код и вставить его, достаточно при создании задания, убрать галку для "Включить автоперенос строк".

 

1. Олимпийка для секторов, на первом уровне 8 ячеек, объединяем в 2-е ячейки, на каждом следующем уровне.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div class='olymp_wrapper' data-type='sector'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>createSimpleOlymp(8, 2, 1)</script>


2. Олимпийка для бонусов, на первом уровне 1024 ячейки, объединяем в 2-е ячейки, на каждом следующем уровне.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css>

<div class='olymp_wrapper' data-type='bonus'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>createSimpleOlymp(1024, 2, 1)</script>


3. Олимпийка для секторов, в виде бабочки, на первом уровне 27 ячеек, объединяем в 3-и ячейки, на каждом следующем уровне.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div class='olymp_wrapper' data-type='sector' data-layout='butterfly'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>createSimpleOlymp(27, 3, 1)</script>

olymp_2_0-15_ex_3.jpg


4. Олимпийка для бонусов, в обратном порядке, на первом уровне 16 ячеек, объединяем в 2-е ячейки, на каждом следующем уровне.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div class='olymp_wrapper' data-type='bonus' data-layout='reverse'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>createSimpleOlymp(16, 2, 1)</script>


5. Олимпийка для секторов, на первом уровне 4 ячейки, объединяем в 2-е ячейки, на каждом следующем уровне. Обновляем 1-ю ячейку, 6-ю ячейку и 7-ю ячейку.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div class='olymp_wrapper' data-type='sector'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>

createSimpleOlymp(4, 2, 1)

 

updateCellInOlympById(1, 'вопрос 1', 1)

updateCellInOlympById(6, 'вопрос 6', 1)

updateCellInOlympById(7, 'вопрос 7', 1)

</script>


6. Олимпийка для бонусов, на первом уровне 4 ячейки, объединяем в 2-е ячейки, на каждом следующем уровне. Обновляем все ячейки, начиная с 1-й ячейки.

PS: рекомендую массив с новым содержимым ячеек писать в столбик, так вам будет удобнее добавлять новые данные.

Пример внизу.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div class='olymp_wrapper' data-type='bonus'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>

createSimpleOlymp(4, 2, 1)

 

updateCellsInOlymp([

'вопрос 1',

'вопрос 2', 

'вопрос 3',

'вопрос 4',

'вопрос 5',

'вопрос 6',

'вопрос 7'], 1, 1)

</script>


7. Олимпийка для бонусов, на первом уровне 4 ячейки, объединяем в 2-е ячейки, на каждом следующем уровне. Обновляем ячейки, начиная с 4-й ячейки.

PS: рекомендую массив с новым содержимым ячеек писать в столбик, так вам будет удобнее добавлять новые данные.

Пример внизу.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div class='olymp_wrapper' data-type='bonus'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>

createSimpleOlymp(4, 2, 1)

 

updateCellsInOlymp([

'вопрос 4',

'вопрос 5',

'вопрос 6'], 4, 1)

</script>

 

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

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div class='olymp_wrapper' data-type='bonus'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>

createSimpleOlymp(4)

 

loadBonusesInOlymp()

</script>

olymp_2_0-19_ex_8.jpg

 

9. Если вы решили добавить олимпийку для ШТУРМОВОЙ игры, тогда необходимо добавить data-id для олимпиек.
Ниже будет создана о
лимпийка для бонусов, на первом уровне 4 ячейки, объединяем в 2-е ячейки, на каждом следующем уровне. Обновляем ячейки, начиная с 4-й ячейки.

Пример внизу.

<link rel='stylesheet' href='https://d1.endata.cx/images/personal/1438581/olympMatrix2.0.css'>

<div data-id='shturm_olymp_1' class='olymp_wrapper' data-type='bonus'></div>

 

<script src='https://d1.endata.cx/images/personal/1438581/utilsOlympMatrix2.0.js'></script>

<script src='https://d1.endata.cx/images/personal/1438581/olymp2.0.js'></script>

 

<script>

createSimpleOlymp(4, 2, 'shturm_olymp_1')

 

updateCellsInOlymp([

'вопрос 4',

'вопрос 5',

'вопрос 6'], 4, 'shturm_olymp_1')

</script>

ДЛЯ ПРОШАРЕННЫХ В ПРОГРАММИРОВАНИИ

Все default значения, можно не указывать.

1. Обертка.

В div-обертку (ниже) будет добавляться будущая таблица с олимпийкой.

<div class='olymp_wrapper'></div>

Параметры:

- data-type: bonus(default) или sector. Задает тип олимпийки.

- data-layout: reversebutterfly или butterfly_2. Default = ''. Задает вид олимпийки.

- data-id. Задает идентификатор в ШТУРМОВОЙ игре.


Обертка с дефолтными параметрами (ниже). Будет создана олимпийка для бонусов.

<div class='olymp_wrapper'></div>

2. Генерация.

Используем метод: createSimpleOlymp.

<script>createSimpleOlymp(27, 3, 2)</script>

Параметры, на примере выше:

- Кол-во секторов 1-о уровня (= 27). Default = 8.

- Кол-во объединяемых ячеек на следующем уровне (= 3). Default = 2.

- Номер олимпийки в задании (= 2, для задания с 2-я олимпийками в 1-м задании). Default = 1.

 

Вызов функции с дефолтными параметрами (ниже). Будет создана олимпийка, на первом уровне 8 ячеек, объединяем в 2-е ячейки, на каждом следующем уровне, для 1-ой олимпийки.

<script>createSimpleOlymp()</script>

3. Обновление одного сектора.

Используем метод: updateCellInOlympById.

<script>updateCellInOlympById(5, 'вопрос 1', 2)</script>

Параметры, на примере выше:

- Номер сектора в олимпийке (= 5).

- Новое значение ячейки (= 'вопрос 1'). Значение в кавычках, может быть текстом или ссылкой на картинку.

- Номер олимпийки в задании (= 2, для задания с 2-я олимпийками в 1-м задании). Default = 1.

 

Вызов функции с дефолтными параметрами (ниже). Будет обновлен текст в 5-ой ячейке на новый = 'вопрос 1', для 1-ой олимпийки.

<script>updateCellInOlympById(5, 'вопрос 1')</script>

4. Обновление нескольких секторов.

Используем метод: updateCellsInOlymp.

<script>

updateCellsInOlymp([

'вопрос 5',

'вопрос 6',

'вопрос 7'], 5, 2)

</script>

Параметры, на примере выше:

- Массив новых значений в кавычках (= ['вопрос 5', 'вопрос 6', 'вопрос 7']). Значение в кавычках, может быть текстом или ссылкой на картинку. В одной олимпийке может быть и текст и картинки.

- Номер ячейки, с которой начнем обновление (= 5). Default = 1.

- Номер олимпийки в задании (= 2, для задания с 2-я олимпийками в 1-ом задании). Default = 1.


Вызов функции с дефолтными параметрами (ниже). Будет обновлен текст с 1-ой ячейки на новый. Для 1-ой ячейки = 'Q'. Для 2-ой ячейки = 'W'. Для 3-ей ячейки = 'E', для 1-ой олимпийки.

<script>

updateCellsInOlymp(['Q', 'W', 'E'])

</script>

5. Загрузка бонусных заданий в олимпийку для бонусов.

Используем метод: loadBonusesInOlymp.

<script>

loadBonusesInOlymp(2)

</script>

Параметры, на примере выше:

- Номер олимпийки в задании (= 2, для задания с 2-я олимпийками в 1-ом задании). Default = 1.

 

Вызов функции с дефолтными параметрами (ниже). Будет обновлен текст с 1-ой ячейки на новый, задание бонуса #1 добавится в ячейку #1; задание бонуса #2 - в ячейку #2, и тд.

<script>

loadBonusesInOlymp()

</script>


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





28.04.2024 2:57:41
(UTC +3)

www.en.cx
EncounterTM Ltd.
2004-2024 ©
Организатор в Ярославле
Winux
: Михаил Костюченко
: +79109683009
: @Winux
Организатор в Рыбинске
VASKAAA
: Василий Новиков
: +79159848624
: @Vaaskaa