Организация DOM структуры в JS

55 сообщений

#15 лет назад

Здравствуйте.
Задача такая - делаю страницу составления теста.

При создании новых вопросов и добавлений вариантов к ним, текстовые поля (
текст вопроса, ответа, вес ответа) добавляются на страницу динамически.

Это дело реализовано, только затрудняюсь в организации DOM таким образом, чтобы
потом это можно было отправить на сервер, чтобы он мог обработать.

На данный момент сделал так:
id всего вопроса = ++id (изначально id=0)
и мы уже имеем
<div class = "question" id = "n_1"></div>
<div class = "question" id = "n_2"></div>
и т.д. (при вызове соответствующей функции, конечно)

Далее - вариант имеет id = Id вопроса + "_" + "v_" + порядковый номер варианта в вопросе,
а вес варианта - Id вопроса + "_" + "b_" + порядковый номер варианта в вопросе

Вот, как это всё реализовано:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script src = "func.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Создание теста</title>

<link href = "style.css" rel = "stylesheet" type = "text/css">

</head>

<body>


    <script>


    var id = 0;          // хранит количество вопросов, увеличивается при создании вопроса

    var body = document.body;

    var arrid =  ;     // в массиве находится количество вариантов для каждого вопроса 

    //элементы массива создаются при создании вопроса и равны 0

    //значения массива увеличиваются при добавлении варианта в соответствующий вопрос


function  quest () {

    // новый вопрос

    var quest = create ( 'div' );

    quest.className = "question";

    quest.id    = "n_" + ++id;

    quest.innerHTML = "Новый вопрос";

    append ( body, quest );

    arrid  = 0;  // пока для этого вопроса 0 вариантов

    return quest;

}


function text ( questId ) {

    // текст вопроса

    var text = create ( 'div' );

    var quest = document.getElementById ( questId );  //получаем вопрос по id 

    text.className = "text";

    text.innerHTML = "Текст вопроса";

    append ( quest, text );

    var input = create ( 'input' );

    input.type = "text";

    input.id   = "f_" + id;

    append ( text, input );

}



function variant ( questId ) {

    // вариант

    var variant = create ( 'div' );

    var quest = document.getElementById ( questId );    //получаем вопрос по id 

    variant.className = "variant";

    variant.innerHTML = "Вариант";

    append ( quest, variant );

    var linkCount = ++arrid;        // получаем порядковый номер варианта(нумерация с 1)

    var variantText = create ( 'input' );    // текст варианта

    var variantWeight = create ( 'input' );  // вес ворианта

    variantText.id = questId + "_" + "v_" + linkCount;

    variantText.className = "variantText";

    append ( variant, variantText );

    variantWeight.id = questId + "_"  + "b_" + linkCount;

    variantWeight.className = "variantWeight";

    append ( variant, variantWeight );

}


// тут вызовы функций - строим

quest ();

quest ();

text ('n_1');

variant ('n_1');

variant ('n_1');

text ('n_2');

variant ('n_2');

variant ('n_2');

variant ('n_2');



    </script>

</body>

</html>

Пояснение: func.js - небоьшие функции для работы с DOM

Вот так пока и живём.

Может, кто-то сталкивался, есть идеи, как улучшить структуру, а то мне самому кажется очень замысловато.

403 сообщения

#15 лет назад

Тоже когда то делал админку для онлайн тестов, но вам оно надо столько кода? у меня был js код в пару строк который просто добавлял новый инпут вида:
<input name="question" ... >
А на сервере просто массив $_POST разбирал и всё.
или вам нужно именно в таком виде?

Зачем усложнять себе жизнь домами, будками там всякими) или я отстал от жизни?

55 сообщений

#15 лет назад

Цитата ("Gia-WEB"):

Тоже когда то делал админку для онлайн тестов, но вам оно надо столько кода? у меня был js код в пару строк который просто добавлял новый инпут вида:
<input name="question" ... >
А на сервере просто массив $_POST разбирал и всё.
или вам нужно именно в таком виде?

Зачем усложнять себе жизнь домами, будками там всякими) или я отстал от жизни?

Но в моём случае нужно чтобы к вопросу можно было добавлять варианты т.е. ещё инпуты и они должны быть друг с другом как-то связвны

403 сообщения

#15 лет назад

Ну что тут сложного? добавьте значит еще.
Цитата ("wellwit"):

как-то связвны

думаю когда узнаете "как", тогда и сможете решить задачу, а то мало кто может решить задачу без условия

55 сообщений

#15 лет назад

Цитата ("Gia-WEB"):

думаю когда узнаете "как", тогда и сможете решить задачу, а то мало кто может решить задачу без условия

связаны очень просто - текст вопроса, вариантов, вес вариантов являются дочернымы элементом по отношению к div вопроса

403 сообщения

#15 лет назад

Используйте в названиях инпутов двумерные массивы тогда. Это если вы на одной странице сразу несколько вопросов добавляете

55 сообщений

#15 лет назад

Я тут подумал, может вообще никаких имён не писать, чтобы код не засорять, просто создавать элементы, а когда пользователь нажмёт "создать тест", весь html мы отправим серверу, а там уже разбираться что к чему?

403 сообщения

#15 лет назад

Тоесть когда 100 строк js кода и столько же на сервере только чтобы получить данные это не засорение кода?

403 сообщения

#15 лет назад

Пока ты юный, советую набить руку на сокращение и оптимизацию кода на сайтах по типу acmp.ru(язык не пхп/js конечно, но думаю подучить паскаль труда не составит)
За то потом поможнт думаю, хотя я не тот кто может тут учить

55 сообщений

#15 лет назад

Кстати, хотел спросить, выцарапывать информацию из html регэкспами - это извращение ?

11416 сообщений

#15 лет назад

Почему извращение? По моему это самый удобный способ...

578 сообщений

#15 лет назад

Цитата ("wellwit"):

выцарапывать информацию из html регэкспами - это извращение

конечно.
намного лучше разобрать строку на массив символов, потом пробежаться по ней циклически в поисках первого совпадаения с первым символом искомого шаблона, потом проверить совпадаеие с 2м символом и тд, потом резать сабстрингом, складывать в массивы... )))