Jump to content
Fórum Script Brasil
  • 0

Leitura Dinâmica


Question

Prezados,

Uma boa tarde a todos...

Estou desenvolvendo um site para um cliente, e ele me solicitou, uma forma de quando uma pessoa abrir um artigo grande para leitura, e de acordo que a página é aberta, e em fração de segundos, e destacando em amarelo o texto, em três grupos de palavras, até o final do artigo.

Ex.:

A página abrirá um texto gravado no banco MySQL (já está pronto) e ao abrir destacando as palavras em grupo de três palavras. E se possível, ter uma forma de aumentar a velocidade desta marcação para a pessoa desenvolver a leitura com uma maior velocidade.

Não sei se posso fazer isso é PHP ou Javascript, alguém poderia me ajudar neste sentindo.

Sds,

Vagner Nunes

Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Prezados,

Em relação a esse sistema de Leitura dinâmica, que estava querendo, achei um JavaScript que seria mais ou menos o que estou querendo, mas o problema é que ele seleciona grupo de palavras, mas gostaria que ele selecionasse um grupo por linha, e não continuasse a seleção na linha de baixo. E também tem como fazer ele funciona sem ser em um Textarea.

Veja: http://www.gouarts.com/Scripts/ditador.htm

Segue arquivos:

Página

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">



    
    <title>Leitura Dinamica</title>
    
    <link rel="stylesheet" href="ditador_arquivos/style.css">
    
    <script src="ditador_arquivos/jquery.js"></script>
    <script src="ditador_arquivos/jquery-ui-slider.js"></script>

    <script type="text/javascript" src="ditador_arquivos/jscolor.js"></script>
    
    <script src="ditador_arquivos/rsvp.js"></script>
    <script src="ditador_arquivos/pagespecific.js"></script>

    <link type="text/css" href="ditador_arquivos/style_002.css" rel="stylesheet">
    <script src="ditador_arquivos/script.js" type="text/javascript"></script>
    <script type="text/javascript">
        function submitRating(evt)
        {
            var tmp = evt.target.getAttribute('id').substr(5);
            var widgetId = tmp.substr(0, tmp.indexOf('_'));
            var starNbr = tmp.substr(tmp.indexOf('_')+1);
            $.get("./feedback.php",
               { ratingID: widgetId, ratingValue: starNbr},
               function(data){
                 $(".rating_stars").html("Thank you!");
               }
             );
        }

    function jqueryInit()
    {
        init_rating();
        $('span.rating_stars img').bind('click', submitRating);
    }
    
    $(document).ready(jqueryInit);
    
    function openFeedbackForm(){
        $("#feedback_div").show();
    }
    
    function hideFeedbackForm(){
        $("#feedback_div").hide();
    }
    
    function submitFeedback(){
        $.get("./feedback.php",
       { feedback: $("#feedback_text").val() },
       function(data){
         $("#feedback_div").html("Thank you for your comment.");
         setTimeout(function(){ $("#feedback_div").hide('slow'); }, 2000);
       }
     );
    }
    </script>

</head><body>
<h2><noscript>
  </noscript>
</h2>
    
<div style="margin: 0px 0px 15px 15px;"></div>
    
<div id="feedback_div" style="margin: 0px 0px 15px 15px; display: none;"><form action="./feedback.php" method="get"><textarea id="feedback_text" rows="3" cols="40"></textarea><br><input value="Send comment" onclick="submitFeedback()" type="button"><input value="Hide form" onclick="hideFeedbackForm()" type="button"></form></div>
    
    <div id="tabs">
        <ul id="tabs_ul">
            <li id="textinput_tab">
                <a href="#" id="current" onclick="showtab(1); return false;">

                    Escreva um texto                </a>            </li>
            <li id="playback_tab">
                <a id="" href="#" onclick="showtab(2); return false;">
                    Visualizar                </a>            </li>
            <li id="info_tab"></li>
        </ul>
</div>

    
    <div style="display: block;" id="textinput_pane" class="tab_pane">
        <div id="input_text">
            Para teste escreva um texto aqui!<br>&nbsp;<br>
            <textarea id="input_text_ta" cols="70" rows="10">A maioria das pessoas, quando perguntada, diz que não gosta de ler, porque isto lhe dá sono. Na verdade, não é a leitura que dá sono, e sim o modo como ela é realizada. Devido ao modo como aprendemos a ler, as pessoas ficam com hábitos prejudiciais de leitura , tais como:

1) Sub-vocalização(leitura como os lábios ou com a garganta)
2) Leitura Linear (palavra por palavra)
3) Leitura desatenta (com constantes re-leituras do mesmo trecho, e uma baixa retenção do conteúdo lido)

Também em razão deste tipo de leitura, as pessoas acostumam-se a ler pouco, o que acarreta na maioria dos casos num pequeno repertório de palavras. Assim, qualquer palavra que desconheçam (devido a pouca leitura) provoca-lhe um desconforto interno incosciente, que elas (as pessoas) procuram justificar-se dizendo para si próprio e para os outros que não gosta muito de ler.

Existem, então, dois motivos básicos pelos quais você lê errado:

1) o modo como aprendeu a ler.
2) ler de modo inconstante.

Na verdade, um decorre do outro: você lê pouco, devido ao modo como aprendeu a ler. É claro que isto não significa que não saiba ler; isto significa apenas que, em sua aprendizagem, foi imposto um limite à sua velocidade de leitura, limite este que você jamais tentou superar.

Quando se ensina uma pessoa a ler, as palavras são divididas em sílabas, para facilitar a aprendizagem da leitura. Além disso, as palavras são lidas em voz alta, sílaba por sílaba. Infelizmente, depois de aprendida a leitura, as pessoas continuam a ler fazendo esta vocalização das palavras; mesmo que silenciosamente. Na verdade, este é o maior obstáculo à leitura rápida.

Para aprender a ler dinamicamente, de um modo veloz e produtivo, você deve mudar o seu método de leitura, o que se pode conseguir com um treinamento especial. Primeiro, você deve perder o hábito de sub-vocalizar as palavras. depois, deve habituar-se a enxergar o conjunto de palavras, ao invés das palavras isoladas. À medida que progredir nos exercícios, você conseguirá enxergar blocos cada vez maiores de palavras de uma só vez. Com o exercícios, você conseguirá enxergar blocos cada vez maiores de palavras de um só vez. Com os exercícios de atenção, aprenderá a aumentar a sua atenção durante a leitura, o que fará que retenha cada vez mais o conteúdo do que ler.

A velocidade que conseguir atingir, a par desta retenção de conteúdo, darão um prazer cada vez maior às suas leituras.

Faço os seus exercícios progressivamente, sem pressa e sem pular nenhum, de modo persistente. Escolha um lugar sossegado, e procure colocar-se de modo relaxado e receptivo, confiando que irá conseguir o que deseja. </textarea>
            <br>&nbsp;<br>
            
            <a href="#" onclick="startNewPlayback(); return false;" title="Começar" onmouseover="$(this).find('img').attr('src', 'ditador_arquivos/playthattext2.jpg'); return false;" onmouseout="$(this).find('img').attr('src', 'ditador_arquivos/playthattext.jpg'); return false;"><img src="ditador_arquivos/playthattext.jpg"></a>
        </div>
    </div>

    
    <div style="display: none;" id="playback_pane" class="tab_pane">
        <div id="display">input some text <br>and click "Play <br></div>
        
        <div id="viewerTa_div" class="controls_div">
          <div style="margin-bottom: 8px;"><a href="#" onclick="$('#viewer_ta').toggle();" style="text-decoration: none;"><b>Ocultar/Mostrar Scroller</b></a>. <small>(Esse recurso só funciona no Firefox e no Internet Explorer - A rolagem não aparece em outros navegadores!)</small></div>
            <textarea id="viewer_ta" rows="5" cols="70"></textarea>
        </div>

        
        <div id="playback_controls" class="controls_div">
            <table id="controls_table">
                <tbody><tr>
                    <td>
                        <a href="#" onclick="playButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/play.gif"></a>
                        <a href="#" onclick="pauseButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/pause.gif"></a>
                        <a href="#" onclick="rewindButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/rewind.gif"></a>
                    </td>
                    <td>

                        <div class="ui-slider" id="slider_div">
                            <a href="#" style="border: medium none; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;"><div style="left: 70.07px;" class="ui-slider-handle"></div></a>
                        </div>
                    </td>
                </tr>
            </tbody></table>
        </div>
        
        <div id="settings" class="controls_div">
            <table id="settings_table">

                <tbody>
                    <tr>
                        <td>Números de Linhas (A): <input size="3" id="numLines" value="2" onchange="recomputeWpm()" type="text">&nbsp;&nbsp;</td>
                        <td>Palavras por linha (B): <input size="3" id="wordsPerLine" value="3" onchange="recomputeWpm()" type="text"></td>
                    </tr>
                    
                    
                    <tr>
                        <td>Grupos por minutos(C): <input size="3" id="groupsPerMinute" value="100" onchange="recomputeWpm()" type="text">&nbsp;&nbsp;</td>

                        <td>(Calculo) Palavras por minutos (A*B*C): <input size="3" value="600" id="wordsPerMinute" onchange="recomputeWpm()" disabled="true" type="text"></td>
                    </tr>
                    
                    
                    <tr>
                        <td style="text-align: left; font-weight: bold; font-size: 10pt;">
                            Você também pode pressionar para cima / baixo nas setas do teclado <br> para aumentar / diminuir a velocidade.
                      </td>
                        <td style="text-align: right;">
                            <input value="Salvar Modificações" onclick="changeSettingsButtonCallback();" type="button">

                        </td>

                    </tr>
                </tbody>
            </table>
        </div>

        <div id="colors_div" class="controls_div" style="padding: 5px 0pt;">
            Cor de Fundo: <input style="background-color: #FFFFFF; color: rgb(0, 0, 0);" autocomplete="off" class="color" id="bg_color" size="6" value="#FFFFFF">

            &nbsp;&nbsp;&nbsp;Cor do Texto: <input style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);" autocomplete="off" class="color" id="text_color" size="6" value="000000">
        </div>
    </div>
    
    <div style="display: none;" id="info_pane" class="tab_pane">
        <h3>&nbsp;</h3> 
        </body></html>
pagespecific.js
// ---------------------------------------------------------------------------
// Functions that bind the UI to the Rsvp object

function extractSettings(){
    return {
            'numLines': parseInt($('#numLines').val()),
            'wordsPerLine': parseInt($('#wordsPerLine').val()),
            'groupsPerMinute': parseInt($('#groupsPerMinute').val())
        };
}

function changeSettingsButtonCallback(){
    var newSettings = extractSettings();
    
    if($("#display").data('rsvpInstance'))
        $("#display").data('rsvpInstance').changeSettings(newSettings);
    
    recomputeWpm();
}

function recomputeWpm(){
    var newSettings = extractSettings();

    $("#wordsPerMinute").val(
            newSettings.numLines *
            newSettings.wordsPerLine *
            newSettings.groupsPerMinute);
}

function _incrementSpeed(wpm_plus){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        newGpm = rsvpInstance.incrementSpeed(wpm_plus);
        $('#groupsPerMinute').val(newGpm);
        recomputeWpm();
    }
}

function startNewPlayback(){
    showtab(2);
    
    var oldInstance = $("#display").data(
        'rsvpInstance');
        
    if(oldInstance){
        oldInstance.destroy();
    }
    
    $('#viewer_ta').val($('#input_text_ta').val());
    
    var rsvpInstance = new Rsvp(
            $("#input_text_ta").val(),
            $('#display'),
            extractSettings(),
            $('#slider_div'),
            $('#viewer_ta')
        );

    $("#display").data(
        'rsvpInstance',
        rsvpInstance
    );
    
    rsvpInstance.start();
}

function handleSlideEvent(e, ui){
    var newValue = ui.value;

    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        if(!rsvpInstance.sliderEventDisabled){
            rsvpInstance.moveToPercentage(newValue / 200);
        }
    }
}

function playButtonCallback(){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        rsvpInstance.playOrResume();
    }
}

function pauseButtonCallback(){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        rsvpInstance.pause();
    }
}

function rewindButtonCallback(){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        rsvpInstance.rewind();
    }
}

$(function(){
    $('#slider_div').slider({ min: 0, max: 200, startValue: 0, slide: handleSlideEvent });
});

// ---------------------------------------------------------------------------
// Tabs and cosmetic code, unrelated to the Rsvp object

function _hideAllTabs(tabnum){
    $('#textinput_tab a').attr('id', '');
    $('#playback_tab a').attr('id', '');
    $('#info_tab a').attr('id', '');
    
    $('#textinput_pane').hide();
    $('#playback_pane').hide();
    $('#info_pane').hide();
}

function _getTab(tabnum){
    switch(tabnum){
    case 1: return $('#textinput_tab a');
    case 2: return $('#playback_tab a');
    case 3: return $('#info_tab a');
    }
}

function _getPane(tabnum){
    switch(tabnum){
    case 1: return $('#textinput_pane');
    case 2: return $('#playback_pane');
    case 3: return $('#info_pane');
    }
}

function _showOneTab(tabnum){
    var tab = _getTab(tabnum);
    var pane = _getPane(tabnum);
    
    tab.attr('id', 'current');
    pane.show();
}

function showtab(tabnum){
    _hideAllTabs();
    _showOneTab(tabnum);
}


function _keyupHandler(event){
    keycode = event.keyCode;

    if(keycode == 38){
        // up key
        _incrementSpeed(10)
    }else if(keycode == 40){
        // down key
        _incrementSpeed(-10)
    }

    return false;
}

function _setBgColor(color){
    $("#display").css("background-color", "#"+color);
    $("#viewer_ta").css("background-color", "#"+color);
}

function _setFgColor(color){
    $("#display").css("color", "#"+color);
    $("#viewer_ta").css("color", "#"+color);
}

$(function(){
    // To use the text given by the bookmarklet
    var qs = window.location.search;
    
    if(qs && qs.length > 1){
        $('#input_text_ta').val(decodeURIComponent(qs.substring(1)));
    }

    showtab(1);
    $(".playback_control_a img")
        .mouseover(function(){ $(this).css('background-color', '#888'); })
        .mouseout(function(){ $(this).css('background-color', '#aaa'); });

    $(document).keyup(_keyupHandler);

    $("#bg_color").change(
        function(){ _setBgColor(  $("#bg_color").val()  );  }
        );
    $("#text_color").change(
        function(){ _setFgColor(  $("#text_color").val()  );  }
        );

    $("#viewer_ta").keydown(_keyupHandler);
});
rsvp.js
function Rsvp(text, targetDiv, settings, slider, viewerTa){
    this._text = text;
    this._targetDiv = targetDiv;
    this._slider = slider;
    this._viewerTa = viewerTa;
    
    this.changeSettings(settings);
    
    this._initializeFromText(text);
    
    this._nextWordIndex = 0;
    this._curTimeout = null;
    
    this.sliderEventDisabled = false;
    
    this._playing = false;
    
    this._destroyed = false;
}

Rsvp.fn = Rsvp.prototype;

Rsvp.fn._initializeFromText = function(text){
    // match a word and a bunch of non-word-stuff
    // "g" is important if we want lastIndex to be remembered in match object
    var regex = new RegExp("([^\\s]+)\\s+", "mg");

    this._words = [];
    this._wordPositions = [];
    
    var match = null;
    var i = 0;
    var lastLastIndex = 0;
    while((match = regex.exec(text)) != null){
        this._words[i] = match[1];
        this._wordPositions[i] = lastLastIndex;
        lastLastIndex = regex.lastIndex;
        i++;
    }
    
    // last word if there's some text remaining
    this._words[i] = text.substring(lastLastIndex);
    this._wordPositions[i] = lastLastIndex;
    
    i++;
    
    // To make the final iteration in selectRange work
    this._wordPositions[i] = text.length-1;
}

Rsvp.fn.destroy = function(){
    this.pause();
    
    this._destroyed = true;
}

Rsvp.fn.changeSettings = function(settings){
    this._numLines = settings.numLines;
    this._wordsPerLine = settings.wordsPerLine;
    this._groupsPerMinute = settings.groupsPerMinute;
    
    this._wordsPerGroup = this._numLines * this._wordsPerLine;
    
    this._msPerGroup = 60 * 1000 / this._groupsPerMinute;
}

Rsvp.fn.incrementSpeed = function(wpm_plus){
    this._groupsPerMinute += wpm_plus;

    if(this._groupsPerMinute < 1){
        alert("Minimum at 1 group per minute");
        this._groupsPerMinute = 1;
    }

    this._msPerGroup = 60 * 1000 / this._groupsPerMinute;

    return this._groupsPerMinute;
}

Rsvp.fn.start = function(){
    this._playing = true;
    
    this.nextFrame();
}

Rsvp.fn.nextFrame = function(){
    this.showTextRange();
    
    // Adjust slider
    this.sliderEventDisabled = true;
    
    var pos = (this._nextWordIndex - this._wordsPerGroup)
                / (this._words.length - this._wordsPerGroup)
                * 200;
    $(this._slider).slider("moveTo", Math.round(pos), 0);
    
    this.sliderEventDisabled = false;
    
    
    // Timer for next frame
    if(this._playing && this._nextWordIndex < this._words.length){
        this.setTimeout();
    }
}

Rsvp.fn.moveToPercentage = function(percent){
    var startWord = Math.floor(percent * this._words.length);
    
    // Round to correct start word (ie. if wordsPerGroup = 4,
    // we want groups to start at 0, 4, 8, ...)
    startWord -= startWord % this._wordsPerGroup;
    
    this.showTextRange(startWord);
}

Rsvp.fn.showTextRange = function(firstWordIndex){
    if(firstWordIndex === undefined)
        firstWordIndex = this._nextWordIndex;
    
    this._nextWordIndex = firstWordIndex;
    
    var resHtml = "";
    var firstWordBeginPos = this._wordPositions[firstWordIndex];
    for(var i=0; i<this._numLines; i++){
        for(var j=0; j<this._wordsPerLine; j++){
            if(this._nextWordIndex >= this._words.length){
                this._playing = false;
                break;
            }
            
            resHtml += this._words[this._nextWordIndex] + " ";
            
            this._nextWordIndex++;
        }
        
        if(this._nextWordIndex >= this._words.length){
            this._playing = false;
            break;
        }
        
        resHtml += "<br/>";
    }
    var lastWordEndPos = this._wordPositions[this._nextWordIndex];
    
    this.selectRangeInViewer(firstWordBeginPos, lastWordEndPos);
    
    $(this._targetDiv).html(resHtml);
}

Rsvp.fn.setTimeout = function(){
    if(this._destroyed)
        // no more setting of timeout after this point...
        // otherwise it might conflict with another object
        return;

    // make sure the old timeout is cleared, otherwise timers compete
    if(this._curTimeout)
        clearTimeout(this._curTimeout);
    
    var self = this;

    this._curTimeout = setTimeout(
            function(){ self.nextFrame(); },
            this._msPerGroup
        );
}

Rsvp.fn.pause = function(){
    clearTimeout(this._curTimeout);
    
    this._playing = false;
}

Rsvp.fn.playOrResume = function(){
    this._playing = true;
    
    this.setTimeout();
}

Rsvp.fn.rewind = function(){
    this._nextWordIndex = 0;
    
    this.nextFrame();
}

Rsvp.fn.selectRangeInViewer = function(start, end){
    var ta = $(this._viewerTa).get(0);

    if(!$(this._viewerTa).is(":visible")){
        return;
    }

    if (ta.createTextRange) {
        var oRange = ta.createTextRange();
        oRange.collapse(true);
        oRange.moveStart("character", start);
        oRange.moveEnd("character", end-start);
        oRange.select();
        
    } else if (ta.setSelectionRange) {
        ta.setSelectionRange(start,start+1);
    
        // causes scrolling to caret position in IE, seen there:
        // http://bytes.com/forum/thread496726.html
        // Only works in Firefox... Opera and Safari won't collaborate
        if(window.KeyEvent){
            var ev = document.createEvent ('KeyEvents');
            ev.initKeyEvent('keypress', true, true, window,
                                false, false, false, false, 0,
                                ta.value.charCodeAt(start));
            ta.dispatchEvent(ev);
        }
        
        ta.setSelectionRange(start, end);
    }
    //$(this._viewerTa).blur();

}

Sds,

Vagner Nunes

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148691
    • Total Posts
      644531
×
×
  • Create New...